using datatable on the same page with dynamic data

using datatable on the same page with dynamic data

spnzspnz Posts: 2Questions: 1Answers: 0
edited February 2023 in Free community support

The report page I'm using fetches data through an api/ajax call from the server. I have a text box to collect input from the user which triggers the ajax call that renders the data from the server and the data is presented in a datatable. every time the query is made, the page is not reloaded but only the table. I'm using a plugin for column filter which is called using the "initcomplete" function while defining the datatable (as per the example I found for the plugin). I notice that the initcomplete is called only the first time the page is loaded and not everytime the after executing an ajax query. So the column filter text still contains the previous search for that column. Is there a way to reset the column search value or call this part of the code (that's inside initcomplete) everytime I get new data?

            retrieve: true,
            orderCellsTop: true,
            fixedHeader: true,
            paging: false,
            destroy: true,
            fixedColumns: {
              left: 4,
            dom: "Bfrtip", //for data export
            //stateSave: true,
            buttons: [
              //for data export
              $.extend(true, {}, buttonCommon, {
                extend: "copyHtml5",
              $.extend(true, {}, buttonCommon, {
                extend: "excelHtml5",
              $.extend(true, {}, buttonCommon, {
                extend: "pdfHtml5",
              //"colvis", //provide the column visibility selector dropdown
                extend: "colvis",
                //postfixButtons: ["colvisRestore"],
                collectionLayout: "fixed columns",
                collectionTitle: "Column visibility control",
            columnDefs: [
                targets: -1,
                visible: false,
            initComplete: function () {
              var api = this.api();
              // For each column
                .each(function (colIdx) {
                  // Set the header cell to contain the input element
                  var cell = $(".filters th").eq(
                  var title = $(cell).text();
                  console.log(title + colIdx);

                    '<input type="text" placeholder="' + title + '" />'
                  // On every keypress in this input
                    $(".filters th").eq($(api.column(colIdx).header()).index())
                    .off("keyup change")
                    .on("keyup change", function (e) {
                      // Get the search value
                      $(this).attr("title", $(this).val());
                      var regexr = "({search})";
                      var cursorPosition = this.selectionStart;
                      // Search the column for that value
                          this.value != ""
                            ? regexr.replace(
                                "(((" + this.value + ")))"
                            : "",
                          this.value != "",
                          this.value == ""
                        .setSelectionRange(cursorPosition, cursorPosition);

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


  • colincolin Posts: 15,176Questions: 1Answers: 2,589

    You haven't said how the data is reloaded, that's the important part. If you're doing it, programmatically, could you just move that initComplete to the same code? If you're using Ajax, you could trigger the code on the xhr perhaps,


  • HeinerHeiner Posts: 1Questions: 0Answers: 0

    You can reset the column filter search by calling the table using column search = '' in a function like this:
    $("#mytable tfoot input").on( 'keyup change', function () { var idx = $(this).parent().index(); table.column( idx+':visible').search( '').draw(); } );
    or in another event using idx = zero based nth-column number.
    For Global search this may help:
    $("#dt-search-0").val(''); //0= first table on page $("#mytable").DataTable().search('').draw();

Sign In or Register to comment.