JS - DataTables control on the number of displays per page

Brief introduction

ataTable Is a very useful form management plug-in , In use , We just need to give the data to datatable,datatable Can automatically give us the management form , Its functions include paging 、 Sort 、 Search for , wait .

This front-end plug-in has another feature , The display field is controlled by the backend , Data request , Also in the way of interface .

therefore , New contacts , It may not be clear , Each page shows where the entries are controlled , I took a detour at the beginning , Will now " Control of the number of displays per page ", Summarized below .

The point is

iDisplayLength:pageShowNums   // Number of displays per page

Code example

JS Code operation location ：

let options = {
    serverSide: true,
    paging: true,
    searching: false,
    ordering: false,
    iDisplayLength:100, // 【1】
    ajax: {
        url: "/user-manages" // 【2】
    },
    columns: [
        @foreach ($columns as $column)
        {data: "{
   { $column->name }}"} @if (!$loop->last) , @endif
        @endforeach
    ], // 【3】
    rowCallback: function(row, data) {
        @can('manage diantai user')
        let actions = '<a href="/user-manages/' + data.id + '/edit" class="btn btn-primary"> edit </a>'
        actions += '<button class="btn btn-sm btn-delete" data-id="' + data.id + '"
 data-toggle="modal" data-target="#modal_confirm"> Delete </button>';
        $('td:eq({
   { count($columns) }})', row).html(actions)
        $('#count_num').text(data.count);
        @endcan
    }
}

Explanation of notes

【1】： This is to control the setting of the number of items displayed in the list , These are all in js End control

【2】： Request data interface , namely , The data of your current page is requested from this interface

【3】： This part , It is responsible for traversing and displaying the table header information data at the back end