How to Call/Reload DataTable On Button Click ?

maulikDave · August 2020

Wait, Please Read Question before Giving answer, it's bit tricky.
I am having a dataTable with ServerSide Rendering, And Custom Pagination Designs (Which I created using "dom" Property).

And a Text box Outside Data table Which is used for searching.

Now, I am getting values that are inside dataTable (i.e Sort Direction, Sort Column, Page Size, etc), and also Datatable is getting refreshed after these values are changed.

But the problem is When I Press "Search" Button (not default search of the data table), the request is not reaching to the server

Here is my data Table

I am Calling this method on click function..

 function OnSearchButtonPressed() {
            if ($.fn.DataTable.isDataTable("#myTable"))
            {
                $('#myTable').DataTable().destroy();
            }

            $("#myTable").DataTable({
                "destroy": true,
                "serverSide": true,
                "bRetrieve": true,
                "searching": false,
                "order": [0, "asc"],
                "pagingType": "simple",
                "dom": 'tilp',
                "lengthMenu" : [3,4,5],
                "autoWidth": false,
                "dom": '<<"table-responsive dark-table border-bottom-0">t<"pagination-datatable"<"row align-items-center"<"col-12 
                           col-sm-6 col-md-6 col-xl-6 col-lg-6"<"d-flex align-items-center"i>><"col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6" 
                          <"d-flex align-items-center justify-content-end"<"pagination-select"l>p>>>>',
                "language": {
                    "paginate": {
                        "next": '<span><img src="/images/next.svg" alt="next-arrow" /></span>',
                        "previous": '<span><img src="/images/previous.svg" alt="prev-arrow" /></span>'
                    },
                },
                "ajax": {
                    "url": "/controller/action/",
                    "type": "Post",
                    "dataType": 'json',
                    "data": function (d) {
                        return getSearchValues(d);
                    },
                    "dataSrc": "data",
                },
                columns: [
                    { "data": "id","name":"P.Id", "searchable": false, "visible": false },
                    
                     // Other Columns
                   
                ],
            });
        }

Please help me with this...
Note:: it was working before I add the "dom" element for custom paging...

kthorngren · August 2020

"searching": false,

This will disable searching. It also removes the search input. Remove this line and use the -option dom` option like you have to remove the search input.

Kevin

maulikDave · August 2020

I tried "searching": false, so far no luck...
also, Table refreshed every time I change some inside values (ie. Sort Dir, Page), but Datatable is not reloading after the outside Search button Click.

kthorngren · August 2020

You need to remove "searching": false,. It disables the search functionality. In the code you posted you have it on line 13.

but Datatable is not reloading after the outside Search button Click.

Are you saying the OnSearchButtonPressed() function is not called?

Kevin

maulikDave · August 2020

I try debugging it .. if goes into the function OnSearchButtonPressed() but not in data table

kthorngren · August 2020

But the thing is I want Search Functionality

Remove the "searching": false, option for search functionality.

but not default provided by data Table,

Use the dom option, like you have, without the f.

so I created an external search input and a search button.

If the above doesn't help then please post the code for this.

Kevin

maulikDave · August 2020

Here I am sharing My Code...

I have...
1. A DataTable With Server-Side Rendering.
2. 3 Search Boxes (None of them is DataTable's Default) & a Search Button

here is My Html it also has one Checkbox....

 <div class="form-group mr-sm-2 search mw-100">
            <input type="text" class="form-control " id="searchByName" 
                   required="">
        </div>
        <div class="form-group mr-sm-2 search mw-100">
            <input type="text" class="form-control " id="searchByAmount" 
                   required="">
        </div>
        <div class="form-group mr-sm-2 search mw-100">
            <input type="text" class="form-control " id="searchByBillingPeriod"
              required="">
        </div>

        <div class="form-group">
            <button type="button" id="pSearch" onclick="OnSearchButtonPressed()" 
          class="btn button-40 mw-110 btn-primary btn-admit">
                Search
            </button>
        </div>



<div class="table-responsive dark-table border-bottom-0">
                <table class="table mb-0" id="myTable">
                    <thead>
                            <tr>
                                <th hidden>
                                    Id
                                </th>
                                <th width="20%">
                                     Name
                                </th>
                                <th width="35%">
                                    Description
                                </th>
                                ... Other Columns
                            </tr>
                        </thead>
                </table>
            </div>

Here is script

 <script>
        $(document).ready(function () {
            OnSearchButtonPressed();
        });


        function OnSearchButtonPressed() {
            if ($.fn.DataTable.isDataTable("#myTable"))
            {
                console.log("in");
                $('#myTable').DataTable().destroy();
            }

            $("#myTable").DataTable({
                "destroy": true,
                "serverSide": true,
                "bRetrieve": true,
                "searching": false,
                "order": [0, "asc"],
                "pagingType": "simple",
                "dom": 'tilp',
                "lengthMenu" : [3,4,5],
                "autoWidth": false,
                "language": {
                    "paginate": {
                        "next": '<span><img src="/images/next.svg" alt="next-arrow" /></span>',
                        "previous": '<span><img src="/images/previous.svg" alt="prev-arrow" /></span>'
                    },
                    "info": '<span style="color:#8298ac">Showing &nbsp;</span><label class="font-weight-bold">_END_&nbsp;</label>',
                },
                "ajax": {
                    "url": "/Controller/Action/",
                    "type": "Post",
                    "dataType": 'json',
                    "data": function (d) {
                        return getSearchValues(d);
                    },
                    "dataSrc": "data",
                },
/// I Add Following "dom" Property for customizing paging designs...
                "dom": '<"product-table product-data-table"<"table-responsive dark-table border-bottom-0"t><"pagination-datatable"<"row align-items-center"<"col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6"<"d-flex align-items-center"i>><"col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6"<"d-flex align-items-center justify-content-end"<"pagination-select"l>p>>>>',
                columns: [
                    { "data": "id","name":"P.Id", "searchable": false, "visible": false },
                    ... Other Columns...
                ],
            });
        }

        function getSearchValues(d) {
            var Name = $("#searchByName").val().trim();
            var amountSearchText = $("#searchByAmount").val().trim();
            var billingPeriodSearchText = $("#searchByBilling").val().trim();
            var activeProduct = $("#active").is(':checked');
            var sorcol = d.columns[d.order[0].column].name;
            var sordir = d.order[0].dir;
            var jsonData =
            {
                pName : Name,
                amount : amountSearchText,
                billingPeriod : billingPeriodSearchText,
                activeProduct : activeProduct,
                startIndex : d.start,
                pageSize : d.length,
                sortColumn: (sorcol) != '' ? sorcol : 'P.Name',
                sortOrder: (sordir) != undefined ? sordir : 'asc'
            };

            return jsonData;
        
        }          

        $("#active").change(function () {
            OnSearchButtonPressed();
        });

Please Help me with this .. Sorting and Paging is working but when I Enter Values in those Text boxes and Press Search button is it not working (Request is not reaching to Server.)

It was Working Before I added dom for Custom paging..

kthorngren · August 2020

Press Search button is it not working (Request is not reaching to Server.)

Did you verify this by looking at the browser's network inspector tool?

Is the OnSearchButtonPressed() function called when clicking the button?

Do you get errors in the browser's console?

Simply saying the request doesn't reach the server doesn't provide enough information to help. What debugging have you done and what specifically have you found to narrow down the problem? Can you post a link to your page or a running test case so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

maulikDave · August 2020

Here is a Test Case...

http://live.datatables.net/woderoce/2/edit

As you can see, A request is made every time I change the Database's internal Parameters like Sorting Links, Paging links, but not at the time I put values in search boxes and hit the search button.

tangerine · August 2020

You still have "searching:false" which Kevin told you twice to remove. You also have two "dom" settings, which isn't going to work.

kthorngren · August 2020

The first problem is this error:

Uncaught ReferenceError: BindProductTable is not defined at HTMLButtonElement.onclick

You have onclick="BindProductTable()". I changed it to onclick="BindTable()".

The problem with the dom string is you are missing a closing >. This causes the table to be removed from the HTML which means the ID example is no longer in the DOM when re-initializing Datatables. You have:

<"product-table product-data-table"
  <"table-responsive dark-table border-bottom-0"t>
  <"pagination-datatable"
    <"row align-items-center"
      <"col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6"
        <"d-flex align-items-center"i>
      >
      <"col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6"
        <"d-flex align-items-center justify-content-end"
          <"pagination-select"l>
        p>
      >
    >
  >

I added a trailing > to the string and now it is sending the request when clicking the button.
http://live.datatables.net/bapavufe/1/edit

Kevin

How to Call/Reload DataTable On Button Click ?

How to Call/Reload DataTable On Button Click ?

Answers

Howdy, Stranger!

Categories

DataTables

How to Call/Reload DataTable On Button Click ?

How to Call/Reload DataTable On Button Click ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables