Migrating to Datatable 2 search stopped working. on search drawCallback not triggered

chiraghapani · August 12

var table = $(table_name).DataTable({
"scrollX": true,
"scrollY": "400px",
fixedHeader: true,
displayStart: displayStart,
searchHighlight: true,
order: [],
columnDefs: columnDefs,
"sDom": 'lBfrt',
"responsive": true,
buttons: [
{
extend: 'excelHtml5',
className: 'btn btn-secondary red-button1',
text: '<i class="excelicon"></i>',
titleAttr: obj.pageName,
title: ""
}

    ],
    stateSave: false,
    serverSide: true,
    searching: true,
    scrollCollapse: true,
    fixedColumns: {
        leftColumns: leftColumn
    },
    pageLength: pageLength,
    ajax: {
        url: obj.url,
        data: obj.data,
        type: 'post',
        processing: true,
    },
    ordering: false,
    columns: columnvalue,
    drawCallback: function () {
        $('.dataTables_paginate.paging_simple_numbers').removeClass('hidden');
        $('.paginate_button.next').removeClass('disabled');
        if (table.data().count() < 100) {
            $('.paginate_button.next').addClass('disabled');
        }
        removeLoader("tableContainer");

        setTimeout(function () { addTableExtraEvents() }, 500);
    }
});
if (table) {
    table.on('xhr.dt', function (e, settings, json, xhr) {
        if ("_SesionOut_" === json) { window.location.href = rootDir + "Error/Index?settings=Your session has been expired" }
    });
    $('#table1_filter label input[type="search"]').unbind();
    $('#table1_filter label input[type="search"]').keyup(function (e) {
        if (e.keyCode === 13) {
            table.on('preXhr.dt',
                function (e, settings, data) {
                    data.start = 0;
                });
            table.search(this.value).draw();
        }
    });
}

allan · August 12

Can you link to a test case showing the issue please? Ideally in this case, two test cases - one showing the old behaviour that you want and the new one.

Thanks,
Allan

chiraghapani · August 12

Using datatable old version 1.10.20 with attached code search was working fine,
then updated datatable to 2.0.8 with same code search stopped working. I found that drawCallback is not calling while searching.

kthorngren · August 12

How have you verified that drawCallback is called not called when searching? drawCallback is called when searching in this test case case:
https://live.datatables.net/pozatiju/1/edit

This issue has not been reported before and normally works as expected. Allan asked for a test case showing the issue to debug. Please post a link to a test case or update mine to show the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chiraghapani · August 13

Hi Kevin below is my code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>

<link href="https://cdn.datatables.net/v/dt/dt-2.1.3/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/dt-2.1.3/datatables.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="table1" class="generatetable table-responsive hidden" aria-label="My Grid">
        <thead>
            <tr id="filter_row">
                <th scope="col" class="checkbox_coulumn1 minwidth-20"></th>
            </tr>
            <tr id="filter_row2">
                <th scope="col" class="colorhearder not-exported text-left">
                    <div class="form-check form-check-inline margin-bottom_-14 pl-2">
                        <input type="checkbox" class="form-check-main" name="table1" value="" id="check-box-main">
                        <label class="form-check-label custom-label" for="check-box-main">
                        </label>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    </div>
  </body>
</html>

var table = $(table_name).DataTable({
"scrollX": true,
"scrollY": "400px",
fixedHeader: true,
displayStart: displayStart,
searchHighlight: true,
order: [],
columnDefs: columnDefs,
"sDom": 'lBfrt',
"responsive": true,
buttons: [
{
extend: 'excelHtml5',
className: 'btn btn-secondary red-button1',
text: '<i class="excelicon"></i>',
titleAttr: obj.pageName,
title: ""
}],
    stateSave: false,
    serverSide: true,
    searching: true,
    scrollCollapse: true,
    fixedColumns: {
        leftColumns: leftColumn
    },
    pageLength: pageLength,
    ajax: {
        url: obj.url,
        data: obj.data,
        type: 'post',
        processing: true,
    },
    ordering: false,
    columns: columnvalue,
    drawCallback: function () {
        $('.dataTables_paginate.paging_simple_numbers').removeClass('hidden');
        $('.paginate_button.next').removeClass('disabled');
        if (table.data().count() < 100) {
            $('.paginate_button.next').addClass('disabled');
        }
        removeLoader("tableContainer");
 
        setTimeout(function () { addTableExtraEvents() }, 500);
    }
});
if (table) {
    $('#table1_filter label input[type="search"]').unbind();
    $('#table1_filter label input[type="search"]').keyup(function (e) {
        if (e.keyCode === 13) {
            table.on('preXhr.dt',
                function (e, settings, data) {
                    data.start = 0;
                });
            table.search(this.value).draw();
        }
    });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

chiraghapani · August 13

Hi Kevin
I have attched code file
plz find and help me
Thanks

chiraghapani · August 13

Hi Kevin,
I have also updated code in your link https://live.datatables.net/pozatiju/2/edit
When firsttime grid load drawCallback calling and data displayed as expected. but its not working while on search and not getting any error in console.

kthorngren · August 13

Your test case is getting this error and is not running:

VM47:1 Uncaught ReferenceError: table_name is not defined

Your ajax.url is referencing the variable obj.url which is not assigned in the test case. The test case actually needs to run and show the issue for us to help debug. Use the ajax config from my test case.

Try placing a console.log statement in your drawCallback to confirm if it runs or not.

    drawCallback: function () {
        $('.dataTables_paginate.paging_simple_numbers').removeClass('hidden');
        $('.paginate_button.next').removeClass('disabled');
        if (table.data().count() < 100) {
            $('.paginate_button.next').addClass('disabled');
        }
        removeLoader("tableContainer");
  
        setTimeout(function () { addTableExtraEvents() }, 500);
    }

Your code is adding or removing classes. Are you expecting something to change on each draw? I don't think anything will change. As I asked before how have you determined drawCallback isn't running for each search?

I'm not sure what addTableExtraEvents() does but if it adds event handlers then drawCallback might not be the place to call this function as it will add a new event handler each draw. Likely you will want to do this only once in initComplete.

Kevin

Migrating to Datatable 2 search stopped working. on search drawCallback not triggered

Migrating to Datatable 2 search stopped working. on search drawCallback not triggered

Answers

Howdy, Stranger!

Categories

DataTables

Migrating to Datatable 2 search stopped working. on search drawCallback not triggered

Migrating to Datatable 2 search stopped working. on search drawCallback not triggered

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables