DataTables used with jQuery Table Filter Plugin => Refresh Pagination

ckmuc

Hi there,

I have a projekt where I am successfully using DataTables. I do have a table with about 1500 rows and all DT features are working well (Pagination, search, Display with Bootstrap, Responsive, ...) - so far so good!

I also use the TableFilter Plugin (picnet) to allow for a "dropdown" selection of elements.

However, if selecting an optoin from the Filter Dropdown, the results get filtered, but the pagination does not get updated. so the "10 lines of results" can be anywhere on the following 60 pages.

How can I manage to have DataTables to refresh what is current visible and also updating the pagination.

    // Initialise Table Filter Plugin
    var options1 = {
        clearFiltersControls: [$('#cleanfilters')],
        filteredRows: function(filterStates) {
            setRowCount();
        },
        matchingRow: function(state, tr, textTokens) {
            if (!state || !state.id) {
                return true;
            }
            var child = tr.children('td:eq(2)');
            if (!child) return true;
            var val = child.text();
            switch (state.id) {
                case 'onlyyes': return state.value !== true || val === 'yes';
                case 'onlyno':  return state.value !== true || val === 'no';
                default:              return true;
            }
        }
    };
    function setRowCount() {
        var rowcount = $('#filestable').find('tbody tr:not(:hidden)').length;
    }   

    $('#filestable').tableFilter(options1);
    
    
$('#filestable').dataTable(
    {
        "paging": false //turned OFF  currently to allow users to work with the tables.
        
    });

My Table Design:

<table cellspacing="1" cellpadding="4" width="100%" id="filestable" data-page-length="25" class="table table-striped table-bordered table-hover table-condensed  dt-responsive">
    <thead>
        <tr>
            <th filter-type='ddl'>Type</th>
            <th filter-type='ddl'>Language</th>
            <th filter='false' class="dateFormat-yyyymmdd" style="width: 60px;">Filedate</th>
            <th>Filename</th>  
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DOC</td>
            <td>english</td>
            <td>20161201</td>
            <td>File 1</td> 
        </tr>
        <tr>
            <td>DOC</td>
            <td>italian</td>
            <td>20161201</td>
            <td>File 2</td> 
        </tr>       
        <tr>
            <td>INSTR</td>
            <td>french</td>
            <td>20161001</td>
            <td>File 3</td> 
        </tr>       
        <tr>
            <td>INSTR</td>
            <td>german</td>
            <td>20161015</td>
            <td>File 4</td> 
        </tr>
...
    </tbody>
</table>

I included those files:
* //cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js
* //cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js
* //cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js
* //cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css
* //cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css

Thank you!

ckmuc

Image embedded