Pagination not avilable after search data

FedericoV

I'm struggling trying to fix a weird issue: I have a working Datatables in Codeigniter, pagination works fine, search data too...but there are a couple of weird issue:

• when I search ( and find) a data, pagination doesn't work..or..better..I don't see just the data that fits the first page according to the num of visible data into the select form elements on left top table.
• reorder column doesn't work....when I click on top of each column I see the small up/down arros that clcle...but data doesn't reorder.

Any hint or suggestion to fix this issues?
Below the HTML table corde and related javascript.

<table id="rmi-datatable" class="table dt-responsive nowrap">
    <thead>
        <tr>
            <th>MM</th>
            <th>Ditta</th>
            <th>Tipo</th>
            <th>Motori</th>
            <th>cn</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

The Javascript code

"use strict";
var RCIDatatables = function() {
    var initRCITable = function() {
        var table = $('#rci-datatable');
        table.DataTable({
            responsive: true,
            autoWidth: false,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            stateSave: true,
            mark: true,
            ajax: {
                url: `${controller_url}/list`,
                type: "POST",
                "data": function ( d ) {
                    d.csrf_test_name = token_hash;
                },
                "dataSrc": function ( json ) {
                    token_hash = json['csrf_test_name'];
                    return json.data;
                }
            },
            columns: [
                {data: 'registration'},
                {data: 'cor'},
                {data: 'manufacturer'},
                {data: 'model'},
                {data: 'cn'},
                {data: 'registerdate'},
                {data: 'cancdate'},
                {data: 'actions', responsivePriority: -1},
            ],
            createdRow: function ( row, data, index ) {
                $('td', row).eq(7).attr('data-id', data.id);
            },  
            columnDefs: [
                {
                    targets: -1,
                    title: 'Actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, full, meta) {
                        return `
                        <td>
                            <div class="btn-group dropdown">
                                <a href="javascript: void(0);" class="table-action-btn dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-pencil-outline mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-progress-wrench mr-2 text-muted font-18 vertical-middle"></i>Edit ac</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-delete-outline mr-2 text-muted font-18 vertical-middle"></i>Remove</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-file-cabinet mr-2 font-18 text-muted vertical-middle"></i>Ac data</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-wallpaper mr-2 text-muted font-18 vertical-middle"></i>Pictures</a>
                                </div>
                            </div>
                        </td>`;
                    },
                },
                {
                    targets: [ 1, 4, 5, 6 ],
                    orderable: false,
                    searchable: false,
                },
            ],
            "language": {
                "paginate": {
                    "previous": "<i class='mdi mdi-chevron-left'>",
                    "next": "<i class='mdi mdi-chevron-right'>"
                }
            },
            "drawCallback": function () {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
            }
        });
    };

    return {
        init: function() {
            initRCITable();
        },
    };
}();

jQuery(document).ready(function() {
    RCIDatatables.init();
});

colin

You have serverSide enabled, so for both your points if's the responsibility of that server-side script to return the necessary information to the client. If you don't have 10ks of data, you may not need that enabled.

If you do, the protocol is discussed here. Also see examples here.

Colin

FedericoV

Hi Colin, thanks a lot for feedback and hints.
I have more then 50ks of data to display. I'll have a look at your links.