jQuery Datatables - Multiple tables on single page with filtering -
i'm facing problem jquery datatables. have page 3 datatables, getting data through ajax call , displying data corectly. sorting , paging working perfectly. filtering not wokring fine. once enter value in search field first table, got last tables filtered , not first table.
i tried this:https://datatables.net/examples/basic_init/multiple_tables.html didn't help
my website mvc 5 c#. have read lot of similar issues here, couldn't find answer workes me. code:
<div class="col-md-12"> <div class="card"> <h3 class="card-title">table 1</h3> <div class="card-body"> <table class="table table-hover table-bordered" id="tablelow1"> <thead> <tr> <th>col1</th> <th>col2</th> <th>col23</th> </tr> </thead> </table> </div> </div> </div> <div class="col-md-12"> <div class="card"> <h3 class="card-title">table 2</h3> <div class="card-body"> <table class="table table-hover table-bordered" id="tablelow2"> <thead> <tr> <th>col1</th> <th>col2</th> <th>col23</th> </tr> </thead> </table> </div> </div> </div> and here jquery code:
function setuptable1() { var tablelow1 = $('#tablelow1').datatable({ destroy: true, "language": { "url": "../scripts/localization/datatables.de.json", searchplaceholder: "id# eingeben..." }, "initcomplete": function (settings, json) { // filter after return or filter deleted $(".datatables_filter input") .unbind() .bind('keyup change', function (e) { if (e.keycode == 13 || this.value == "") { tablelow1 .search(this.value) .draw(); } }); }, "autowidth": false, "autoheight": true, "processing": true, "serverside": true, "ajax": { "url": "/home/getdatatable1", "type": "post" }, scrollx: true, scrolly: true, scrollcollapse: true, "fixedcolumns": { leftcolumns: 1 }, "order": [[1, "desc"]], "columndefs": [ { "targets": 0, "data": null, render: function (data, type, row) { return "<span class='smart_modal btn btn-primary'> accept </span>" } }, { "targets": [0], "orderable": false }, { "targets": [1], "orderable": true }, { "targets": [2], "orderable": false }, { "targets": [3], "orderable": false } ], "columns": [ { "data": null }, { "data": "value1" }, { "data": "value2" }, { "data": "value3" } ] }); }; function setuptable2() { var tablelow2 = $('#tablelow2').datatable({ destroy: true, "language": { "url": "../scripts/localization/datatables.de.json", searchplaceholder: "id# eingeben..." }, "initcomplete": function (settings, json) { // filter after return or filter deleted $(".datatables_filter input") .unbind() .bind('keyup change', function (e) { if (e.keycode == 13 || this.value == "") { tablelow2 .search(this.value) .draw(); } }); }, "autowidth": false, "autoheight": true, "processing": true, "serverside": true, "ajax": { "url": "/home/getdatatable2", "type": "post" }, scrollx: true, scrolly: true, scrollcollapse: true, "fixedcolumns": { leftcolumns: 1 }, "order": [[1, "desc"]], "columndefs": [ { "targets": 0, "data": null, render: function (data, type, row) { return "<span class='smart_modal btn btn-primary'> accept </span>" } }, { "targets": [0], "orderable": false }, { "targets": [1], "orderable": true }, { "targets": [2], "orderable": false }, { "targets": [3], "orderable": false } ], "columns": [ { "data": null }, { "data": "value1" }, { "data": "value2" }, { "data": "value3" } ] }); };
i think $(".datatables_filter input") find every 2 filter input. must use them separately.
for 1.table $("#tablelow1_filter"))
and 2.table $("#tablelow2_filter")
or
for 1.table $(".datatables_filter input", $('#tablelow1_wrapper'))
and 2.table $(".datatables_filter input", $('#tablelow2_wrapper'))
as result:
function setuptable1() { var tablelow1 = $('#tablelow1').datatable({ destroy: true, "language": { "url": "../scripts/localization/datatables.de.json", searchplaceholder: "id# eingeben..." }, "initcomplete": function (settings, json) { // filter after return or filter deleted $(".datatables_filter input", $('#tablelow1_wrapper')) .unbind() .bind('keyup change', function (e) { if (e.keycode == 13 || this.value == "") { tablelow1 .search(this.value) .draw(); } }); }, "autowidth": false, "autoheight": true, "processing": true, "serverside": true, "ajax": { "url": "/home/getdatatable1", "type": "post" }, scrollx: true, scrolly: true, scrollcollapse: true, "fixedcolumns": { leftcolumns: 1 }, "order": [[1, "desc"]], "columndefs": [ { "targets": 0, "data": null, render: function (data, type, row) { return "<span class='smart_modal btn btn-primary'> accept </span>" } }, { "targets": [0], "orderable": false }, { "targets": [1], "orderable": true }, { "targets": [2], "orderable": false }, { "targets": [3], "orderable": false } ], "columns": [ { "data": null }, { "data": "value1" }, { "data": "value2" }, { "data": "value3" } ] }); }; function setuptable2() { var tablelow2 = $('#tablelow2').datatable({ destroy: true, "language": { "url": "../scripts/localization/datatables.de.json", searchplaceholder: "id# eingeben..." }, "initcomplete": function (settings, json) { // filter after return or filter deleted $(".datatables_filter input", $('#tablelow2_wrapper')) .unbind() .bind('keyup change', function (e) { if (e.keycode == 13 || this.value == "") { tablelow2 .search(this.value) .draw(); } }); }, "autowidth": false, "autoheight": true, "processing": true, "serverside": true, "ajax": { "url": "/home/getdatatable2", "type": "post" }, scrollx: true, scrolly: true, scrollcollapse: true, "fixedcolumns": { leftcolumns: 1 }, "order": [[1, "desc"]], "columndefs": [ { "targets": 0, "data": null, render: function (data, type, row) { return "<span class='smart_modal btn btn-primary'> accept </span>" } }, { "targets": [0], "orderable": false }, { "targets": [1], "orderable": true }, { "targets": [2], "orderable": false }, { "targets": [3], "orderable": false } ], "columns": [ { "data": null }, { "data": "value1" }, { "data": "value2" }, { "data": "value3" } ] }); }; 
Comments
Post a Comment