jQuery Datatables - Multiple tables on single page with filtering

Question

i'm facing a problem with jQuery datatables. I have a page with 3 datatables, all getting data through ajax call and displying the data corectly. Sorting and paging are also working perfectly. Only the filtering is not wokring fine. Once i enter value in search field for the first table, i got the last tables filtered and not the first table.

I also tried this:https://datatables.net/examples/basic_init/multiple_tables.html but it didn't help

My website is mvc 5 c#. I have read a lot of similar issues here, but i couldn't find any answer that workes for me. This is my 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 this is here my 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 only after RETURN or filter is 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 only after RETURN or filter is 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" }
                    ]
                });
            };

show your code and we will check and let you know your problem. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jul 28, 2017 at 10:12
@AlivetoDie, im calling the function already but i didnt add the code line here. read my question well, the tables are rendered correctly and data id displayed correctly, the only problem is filtering. This also has nothing to do with lang package path, with is also correct. — alaa_sayegh
– alaa_sayegh, Commented Jul 28, 2017 at 11:05

mehmet baran · Accepted Answer · 2017-07-28 11:08:41Z

i think $(".dataTables_filter input") will find every two filter input. You 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 a Result:

function SetupTable1() {
                var tableLow1 = $('#tableLow1').DataTable({
                    destroy: true,
                    "language": {
                        "url": "../Scripts/localization/datatables.de.json",
                        searchPlaceholder: "ID# Eingeben..."
                    },
                    "initComplete": function (settings, json) {
                        // filter only after RETURN or filter is 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 only after RETURN or filter is 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" }
                    ]
                });
            };

can you add this in my code and paste it here? i tried it already. but it still not working. add it to my code please
@mehmetbaran oh how silly am i, i was trying the same without taking care of the convention. I tried yours now and it seems to be working fine. i will mark this as answer :) many thanks dear . If you found my question also clear, then you can vote it up :)

Antonio Santise · Accepted Answer · 2019-06-10 09:02:52Z

0

I'm coming from days with the same problem. I suggest to "activate" grid 1 or 2 basing it on events, like tabs o show/hide modals and try tu reload datatable. For example, I show two grids in the same page but twop tabs. Qhen I activate a tab, I refresh datatable

$('#grid').DataTable().ajax.reload();

In this manner the filters and other ajax source events will trigger on the last loaded grid.

answered Jun 10, 2019 at 9:02

Antonio Santise

3003 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery Datatables - Multiple tables on single page with filtering

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related