Create Custom InfoFilter at Top of Table

bocahapi

Hi, I have a problem with writing a custom InfoFiltered at top op table,actually i can write but i always get old result look,

the last result is 1, but the top info is not shown 1 then i filter again and getting 0 of result, but the top not shown 0, but 1 ( the result before)

$('#dt-data-santri').DataTable({ 

                "processing"    : true, //Feature control the processing indicator.
                "serverSide"    : true, //Feature control DataTables' server-side processing mode.
                "order"         : [], //Initial no order.
                "language"      : {
                    "info" : "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoFiltered": "<span class='filterdata'>Jumlah dari .. ada _TOTAL_ Santri</span>"
                },

                // Load data for the table's content from an Ajax source
                "ajax"  : {
                    "url"   : "{{ site_url('santri/santri_list') }}",
                    "type"  : "GET"
                },

                //Set column definition initialisation properties.
                "columnDefs"    : [{ 
                    "targets"   : [ -1 ], //last column
                    "orderable" : false, //set not orderable
                },],

                initComplete: function () {
                    this.api().columns('.genre, .kelas, .tahun').every( function () {
                        var filterTag = $('.filters');
                        var column = this;
                        var title  =  $( column.header() ).text();
                        var select = $('<select class="filter form-control form-control-sm"><option value="">Filter '+ title +'</option></select>')
                            .appendTo( $('.filters') )
                            .on( 'change', function () {

                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );

                        select.wrap("<label></label>");
                        
                    } );

                }
            });

            $('.filters').on('change', 'select', function() {
                var aa = $('.filterdata').html();
                $('.total-filters').html(aa);
            })

colin

Hi @bocahapi ,

This is likely to have something to do with your Ajax response. It would be worth comparing your requests and responses with the Ajax tab on this example.

We're happy to take a look if you could provide a test case or link to your page.

Cheers,

Colin