DataTables Ширина комбинированного окна

Question

Я применяю 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)); 

..следующих комбинированные окна заполняются данными из таблицы. Тем не менее, поля автоматически масштабируются, чтобы содержать полную длину значений (некоторые из которых охватывают многие строки), и поэтому столбцы имеют размер слишком большой и работают со страницы. Я решил, что это не проблема с CSS, поэтому мне нужно, чтобы в комбинированных блоках использовалось несколько строк для каждой записи или отображалось только часть значения, чтобы я мог поместить все эти столбцы на одну страницу.

Заранее благодарен!

Answer 1

Ответ для тех, кто после этого:

Я изменил код в 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>'; 
}