2011-01-11 16 views
0

私はDataTables を使用して、自分の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)); 

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

ありがとうございます!これを次の人のため

答えて

0

回答:

Iのようなコンボボックスの値ごとに記憶されているどのくらいのテキストを制限する(コンボボックスが内蔵されている)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>'; 
} 
関連する問題