How to retrieve Datatables filters using an external AJAX call?-CodePudding

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>

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:

CodePudding user response：

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();