如何使用外部 AJAX 调用检索数据表过滤器？
Posted
技术标签:
【中文标题】如何使用外部 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>
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 电话中发送所有这些东西：
【问题讨论】：
我不明白。为什么不能使用 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 调用检索数据表过滤器？的主要内容，如果未能解决你的问题，请参考以下文章
使用 PHP 从外部 URL 检索服务器端 Ajax 加载的 DataTable 数据
如何在 laravel php 中使用 ajax 根据日期范围从 mysql 数据库中检索数据？
如何使用 angularJS restful 服务使用来自外部文件的 json 数据