How to retrieve Datatables filters using an external AJAX call?

Question

I need to call the AJAX function of my DataTables by pressing a button, so what I did is the following:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
          <button>Fetch Data</button>
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

JS

var table;

function getDT() {
  $.ajax({
    Type: 'GET',
    url: '/ajax/objects.txt',
  }).done(function (result) {
    console.log(typeof result);
    result = JSON.parse(result);
    table.clear();
    table.rows.add(result.data).draw();
  });

}



$(document).ready(function() {
  table = $('#example').DataTable({
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]

  });
    
  table.row.add({
    name: 'aaa',
    position: 'temp',
    office: 'temp',
    extn: 'temp',
    start_date: 'temp',
    salary: 'temp',
  }).draw();
  
  $('button').on('click', function () {
    getDT();
  });
  

  
} );

Everything works well but I have a question: how can I retrieve the DataTables columns filter?

Infact, using an external AJAX call I need to pass manually all the parameters that I have to send to the API method, but how can I also pass: order, search, start that are usually sended automatically when I use the ajax property in DataTables like:

ajax: {
    url: '/ajax/objects.txt',
    method: 'GET'
},

I need to send all of this stuff in my custom AJAX call:

I don't get it. Why can't you use the ajax: option from DataTables? — Thallius
– Thallius, Commented Sep 23, 2021 at 14:16
@ClausBönnhoff Because I first need to select some filters in an options panel, then the user can apply those filters by pressing a button and get the data which populate the DataTables — sfarzoso
– sfarzoso, Commented Sep 23, 2021 at 14:20
You can add additional filters to the ajax: call as well. this might be easier as the other way around. But you can of course get the order by myDataTableVar.order() also — Thallius
– Thallius, Commented Sep 23, 2021 at 14:22
@ClausBönnhoff but there is an option to start the DataTables AJAX call only when the user press a button? — sfarzoso
– sfarzoso, Commented Sep 23, 2021 at 14:25
Ok, so you want the table to be empty until someone pushes a button? — Thallius
– Thallius, Commented Sep 23, 2021 at 14:31

Thallius · Accepted Answer · 2021-09-23 14:53:10Z

Hopefully I understand what you need. This should be pretty easy using the ajax: option from DataTables. Just give a function with the data which is settings up some additional attributes like

const myTable = contentDiv.DataTable(
        {
            bProcessing : true,
            bServerSide : true,
            ajax :
            {
                dataType : "json",
                url : your url,
                type : "POST",
                data : function (d)
                {
                    d.data = getDataTableData();
                }
            },
            .....

then define this callback function like

function getDataTableData()
{
    return {
        showData : use a variable here which triggers your backend to give an empty list or even not,
        ... all your additional needed attributes...
        
    };
}

Now your backend can send an empty table if "showData" is not set and when a button is pressed, you changed the "showData" to true or 1 and call

myTable.ajax.reload();

Collectives™ on Stack Overflow

How to retrieve Datatables filters using an external AJAX call?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related