Trying to move my individual column searching into initcomplete breaks it

cadams77

I am currently using individual column searching for my datatable and it works, but I would like to incorporate a language option for emptyTable to show a message when no records are loaded on the datatable initialization. I have read that the filter search needs to go into initcomplete to work with locations, however, whenever I move mine into a new initicomplete the entire table breaks and nothing displays.

Is there an alternative to usign the language option to display a "No records found" message? Am I doing something wrong with my initcomplete?

Script:

$(document).ready(function () {


            $('#<%=ASPxGridView1.ClientID%> tfoot tr td').each(function () {
                var title = $('#<%=ASPxGridView1.ClientID%> thead th').eq($(this).index()).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                $('#<%=ASPxGridView1.ClientID%> tfoot tr').appendTo('#<%=ASPxGridView1.ClientID%> thead');
            });

            var dtable = $('#<%=ASPxGridView1.ClientID%>').DataTable({
                "oLanguage": {
                    "sEmptyTable":     "My Custom Message On Empty Table"
                },
                dom: 'Bfrtilp',
                buttons: [                   
                    {
                        extend: 'csv',
                        text: 'Export',
                        title: 'Applications',
                        exportOptions: {
                            columns: ':visible',                                                                        
                        }
                    }
                ],                
                "lengthMenu": [[100, 500, -1], [100, 500, "All"]],
                "scrollX": true,
                initComplete: function () {

                }

            });

            dtable.columns().eq(0).each(function (colIdx) {
                $('input', dtable.column(colIdx).header()).on('keyup change', function () {
                    dtable
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

                $('input', dtable.column(colIdx).header()).on('click', function (e) {
                    e.stopPropagation();
                });
            });

        $('#divGrid').show();


        dtable.columns.adjust().draw();

            $('#<%=txtSearch.ClientID%>').focusTextToEnd();
            $('#<%=txtSearch.ClientID%>').keypress(function (e) { if (e.which == 13) { e.preventDefault(); $('#<%=btnSearch.ClientID%>').click(); return false; } });

            $(".buttons-colvis").click(function () {
                if ($(".dt-button-collection").height() > 350) {
                    $(".dt-button-collection").css("height", "350px");
                    $(".dt-button-collection").css("overflow-y", "visible");
                }
            });
            });

colin

Hi @cadams77 ,

I don't quite follow, because as you can see in this example here, the customised empty message is displayed regardless of how/where the filtering is done.

Cheers,

Colin

cadams77

Hi @colin,

I actually cannot get that to display at all when I try it on my end. I tried using just your minimal javascript for the datatable, but if I search for something that pulls no results the table just does not display at all. No table headers and no custom message about no results. I am connecting to a gridview instead of an html table, so I am not sure if that makes a difference.

tangerine

I am connecting to a gridview instead of an html table....

DataTables is designed for use with valid HTML tables.

Page one, line one of the manual:

The stated goal of DataTables is "To enhance the accessibility of data in HTML tables".

allan

@cadams77 - Can you link to a page showing the issue so we can take a look please? That would let us understand what is going on and should let us help to resolve it.

Allan