Блог

На моей странице jsp у меня есть приведенная ниже таблица данных, для которой я хочу изменить длину страницы на каждой странице.Я попробовал 3 подхода, но длина страницы не меняется. Я использовал параметр «lengthChange» как «true». Но это также не работает

 $(document).ready(
    function() {
        document.getElementById("invoiceResult").style.display="block";
        dTable = $('#result').DataTable(
                {
                    paging : true,
                    "lengthChange": true,
                    fixedHeader : true,
                    "scrollY" : 400,
                    "scrollX" : true,
                    "bJQueryUI" : true,
                    fixedColumns : true,
                    "pageLength" : 25,
                    "order" : [ [ 4, "desc" ] ],
                    "columnDefs" : [ {
                        "width" : "100px",
                        "targets" : 0
                    } ],
                  drawCallback: function(){
                      $('#result').margetable({
                            type: 2,
                            colindex: [0,1],
                      
                        });      
                   },
                   rowsGroup: [0,1]
                });
        
        //This method is called whenever the page is redrawn
        $('#result').on( 'draw.dt', function () {
            
            var info = table.page.info();
            var currentPage = info.page   1;
            
             if(currentPage==2){
                 
                 //approach 1:
                 $('#result').DataTable.page.len(80).draw();
                 
                 //approach 2:
                 $('#result').DataTable.getPager().config.size = 80;
                 $('#result').DataTable.refresh();
                 
                 //approach 3:
                  $('#result').DataTable({ pageLength: 80 });
            }   
    });
  

Я не уверен в проблеме, с которой вы столкнулись, но в моем примере (с вашими параметрами) Я выбрал подход lengthChange, и он работает нормально:

 //var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees?_limit=7";
var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees";

var table = $('#example').DataTable({
  ajax: {
    url: dataUrl,
    dataSrc: ''
  },
  lengthChange: true,
  pageLength: 25,
  scrollY : 400,
  scrollX : true,
  bJQueryUI : true,
  fixedColumns : true,
  order : [ [ 4, "desc" ] ],
  columnDefs : [ {
    width : "100px",
    targets : 0
  }],
  drawCallback: function() {
    $('#example').margetable({
      type: 2,
      colindex: [0,1]
    });      
  },
  rowsGroup: [0, 1],
  columns: [
    { data: 'id' },
    { data: 'firstName' },
    { data: 'lastName' },
    { data: 'position' },
    { data: 'office' },
    { data: 'age' },
    { data: 'startDate' }
  ]
});  

 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Merge-Cells-HTML-Table/jquery.table.marge.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start Date</th>
    </tr>
  </thead>
</table>
<br>