Filter list jquery datatble at event enter

0

How much you instantiate: myTable = $('#dynamicTableDesc').DataTable();

When trying to call the function: myTable.fnFilter(this.value); of error myTable.fnFilter is not a function and calling: myTable.ajax.reload(); works perfectly .

Already when I install: myTable = $('#dynamicTableDesc').dataTable(); With d lowercase.

When trying to call the function: myTable.fnFilter(this.value); works and calling: myTable.ajax.reload(); does not work .

What should I do to make it work?

Full Code:

    myTable = $('#dynamicTableDesc').DataTable({
                    sAjaxSource: "/@controller/List",
                    bServerSide: true,
                    bPaginate: true,
                    pageLength: 50,
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons: [
                        //{ extend: 'copy' },
                        //{ extend: 'csv' },
                        { extend: 'excel', title: '@titulo' },
                        { extend: 'pdf', title: '@titulo' },
                        {
                            extend: 'print',
                            customize: function (win) {
                                $(win.document.body).addClass('white-bg');
                                $(win.document.body).css('font-size', '10px');
                                $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                            }
                        }
                    ],
                    aoColumnDefs: [
                            { bSortable: false, aTargets: [-1] },
                            { bSearchable: false, aTargets: [-1] },
                            {
                                mRender: function (data, type, row) {
                                    var id = data;
                                    var html = "";
                                    html += "<a href='/@controller/Details/" + id + "' title='Visualizar' class='detalhes @classDetails'><i class='fa fa-eye'></i></a>";
                                    html += "<a href='/@controller/Edit/" + id + "?&ex=1' title='Alterar' class='alterar @classEdit'><i class='fa fa-edit'></i></a>";
                                    html += "<a href='javascript:;' title='Deletar' class='deletar @classDel' data-rel='" + id + "," + row[0].replace(",", "") + ",@controller,Del'><i class='fa fa-trash'></i></a>";
                                    return html;
                                },
                                aTargets: [-1]
                            }
                    ],
                    fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                        $(nRow).attr("id", aData[aData.length - 1]);
                        return nRow;
                    }

                });
                $('.dataTables_filter input')
                    .unbind()
                    .bind('keyup',
                    function (e) {
                        if (this.value.length == 0) {
                            myTable.fnFilter('');
                        } else {
                            if (this.value.length >= 3 && e.keyCode == 13) {
                                myTable.fnFilter(this.value);
                            }
                        }
                    });

myTable.ajax.reload();
    
asked by anonymous 19.09.2017 / 01:23

1 answer

1
  

In fact, the confusion here is about the difference between $ (). dataTable () that you are using and returns a jQuery object and the old DataTables API and $ (). DataTable () that returns the new API instance . (Free Translation)

     

Source: Forum DataTables in English

Knowing this, in order for the reload() method to work, call it as follows:

myTAble.api().ajax.reload();

See the manual on the right hand side for an Update Note explaining the difference between the versions.

    
19.09.2017 / 18:45