如何使用外部 AJAX 调用检索 Datatables 过滤器？

Question

我需要通过按下按钮来调用 DataTables 的 AJAX 函数，所以我做了以下操作：

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

  
} );

一切正常，但我有一个问题：如何检索 DataTables 列过滤器？

事实上，使用外部 AJAX 调用我需要手动传递我必须发送到 API 方法的所有参数，但我如何也传递：order, search, start当我在 DataTables 中使用 ajax 属性时通常会自动发送，例如：

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

我需要在自定义 AJAX 电话中发送所有这些内容：

Answer 1

希望我明白你的需要。使用 DataTables 中的 ajax: 选项应该很容易。只需提供一个带有数据的函数即可设置一些额外的属性，例如

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

然后像这样定义这个回调函数

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...
        
    };
}

现在，如果未设置“showData”并且当按下按钮时，您将“showData”更改为 true 或 1 并调用

，您的后端可以发送一个空 table

myTable.ajax.reload();

如何使用外部 AJAX 调用检索 Datatables 过滤器？

How to retrieve Datatables filters using an external AJAX call?

ajax

jquery

datatables