Изменение количества отображаемых строк в jQuery datatable

почему количество строк в jquery datatable (см. код ниже) не установлен в 5? По умолчанию он равен 10 8as). Почему?--2--> не работает здесь?

<script>
function loadData() {
    $.getJSON(
              'modules/getData.php',
        function(data) {
                  var oTable = $('#newspaper-b').dataTable({
                        "sPaginationType":"full_numbers",
                        "aaSorting":[[3, "asc"]],
                        "bJQueryUI":true,
                        'iDisplayLength': 5,
                        'bLengthChange': false
                  });

                  oTable.fnDraw();

                  var list = data.flights;
                  var textToInsert = '';

                  for (var i = 0; i < list.length; i++) {
                        aux = list[i];
                        textToInsert  += '<tr><td>';
                        textToInsert  += aux.Var1;                                                                  
                        textToInsert  += '</td> </tr>' ;

                    }
                  $('table#newspaper-b tbody').html(textToInsert);

              }
    );             
}         

</script>

5 ответов


попробуйте что-то вроде этого. DataTables имеет встроенные параметры, которые позволяют извлекать данные из источника AJAX, не пытаясь создать его самостоятельно. читать документацию и настроить его по мере необходимости:

function loadData() {
    var oTable = $('#newspaper-b').dataTable({
            "sAjaxSource": 'modules/getData.php',
            "sPaginationType": "full_numbers",
            "aaSorting": [
                [3, "asc"]
            ],
            "bJQueryUI": true,
            'iDisplayLength': 5,
            'bLengthChange': false
    });
};

чтобы каким-то образом изменить таблицу после загрузки данных, вы захотите добавить fnDrawCallback:

 "fnDrawCallback": function( oSettings ) {
      // use jQuery to alter the content of certain cells
      $lastcell = $('#newspaper-b').find('tr').find('td:last');
      // manipulate it somehow
 }

вы можете попробовать

$('#example').dataTable( {
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );

кроме того, если вы ранее работали/тестировали с "bStateSave": true и iDisplayLength Не указано/по умолчанию, затем сохраненное значение по умолчанию для iDisplayLength будет переопределять любые последующие попытки указать новое значение, и вы все равно получите 10 строк. Попробуйте очистить кэш, установив "bStateSave": false, С указанием iDisplayLength вы хотите, и снова работает.


проверьте эту ссылку, вы можете найти это полезным:

динамически изменить iDisplayLength


Это определенно самый простой способ я нашел:

var oTable;

$(document).ready(function() {
    $('.some-button').click( function () {
        var oSettings = oTable.fnSettings();
        oSettings._iDisplayLength = 50;
        oTable.fnDraw();
    });

    oTable = $('#example').dataTable();
});