如何使用外部 AJAX 调用检索数据表过滤器？

Posted 2023-05-09

技术标签:

【中文标题】如何使用外部 AJAX 调用检索数据表过滤器？【英文标题】：How to retrieve Datatables filters using an external AJAX call? 【发布时间】：2021-11-16 22:50:06 【问题描述】：

我需要通过按一个按钮来调用我的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" >
                <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();
  );
  

  
 );

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

事实上，使用外部AJAX 调用我需要手动传递我必须发送给API 方法的所有参数，但是我怎样才能传递：order, search, start 通常在我使用时自动发送DataTables 中的 ajax 属性喜欢：

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

我需要在我的自定义AJAX 电话中发送所有这些东西：

【问题讨论】：

我不明白。为什么不能使用 DataTables 中的 ajax: 选项？ @ClausBönnhoff 因为我首先需要在选项面板中选择一些过滤器，然后用户可以通过按下按钮应用这些过滤器并获取填充DataTables的数据您也可以向 ajax: 调用添加其他过滤器。反过来，这可能会更容易。但是您当然也可以通过 myDataTableVar.order() 获取订单 @ClausBönnhoff 但是只有在用户按下按钮时才可以选择启动DataTables AJAX 调用？好的，所以你希望桌子是空的，直到有人按下按钮？ 【参考方案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 并调用

myTable.ajax.reload();

【讨论】：

以上是关于如何使用外部 AJAX 调用检索数据表过滤器？的主要内容，如果未能解决你的问题，请参考以下文章