0

HTML テーブルでフィルタリング、並べ替え、ページネーションを利用するためにDataTablesを適用しています。次のコードを使用して、これらの属性をテーブルに適用しています。

$(document).ready(function() {

  <!-- Sorting and pagination -->
  var oTable = $('#mainTable').dataTable( {
    "sPaginationType": "full_numbers",
    "bJQueryUI": true
  });

  <!-- Filtering -->
  $("thead td").each( function ( i ) {
    <!-- Create and populate combo boxes -->
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
    <!-- Filter data when selection changes -->
    $('select', this).change( function () {
      oTable.fnFilter( $(this).val(), i );
    });
  });

});

関数呼び出しで:

fnCreateSelect( oTable.fnGetColumnData(i));

..コンボ ボックスには、テーブルのデータが入力されます。ただし、ボックスは値の全長を含むように自動的にサイズ設定されます (一部は複数の行にまたがります)。そのため、列のサイズが大きすぎてページからはみ出してしまいます。これは CSS の問題ではないと判断したため、コンボ ボックスでエントリごとに複数の行を使用するか、値の一部のみを表示して、これらすべての列を 1 ページに収めることができるようにする必要があります。

前もって感謝します！

4

1 に答える 1

0

これに従う人への回答：

fnCreateSelect (コンボ ボックスが作成される場所) のコードを変更して、コンボ ボックスの値ごとに保存されるテキストの量を次のように制限します。

function fnCreateSelect(aData) {

    var r = '<select><option value=""></option>', i, iLen = aData.length;

    for (i = 0; i < iLen; i++) {
        // If string is a URL, handle it accordingly
        if (aData[i].indexOf("href") != -1) {
            var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
            r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
            if (url.length > 25)
                r += '...';
        }
        else {
            r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
            if (aData[i].length > 40)
                r += '...';
        }
        r += '</option>';
    }
    return r + '</select>';
}
于 2011-01-12T17:00:54.713 に答える