2011-01-11 57 views
0

我申请DataTables 利用过滤,在我的HTML表格排序和分页。我使用下面的代码将这些属性应用到表:数据表组合框的宽度

$(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问题,所以我需要的是一种让组合框对每个条目使用多行的方法,或者只显示一部分值,以便我可以将所有这些列放在一个页面上。

在此先感谢!

回答

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>'; 
}