[英]How do I enable DataTable JS Server Side?
I am trying to make a function table to be a data table but as a noob am failing.我正在尝试将 function 表作为数据表,但作为菜鸟我失败了。 I want search and pagination Datatable.
我想要搜索和分页数据表。 Can anyone help?
任何人都可以帮忙吗?
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"fetch.php",
method:"POST",
dataType:"json",
success:function(data)
{
var html = '';
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td><input type="checkbox" id="'+data[count].id+'" data-name="'+data[count].name+'" data-address="'+data[count].address+'" data-gender="'+data[count].gender+'" data-designation="'+data[count].designation+'" data-age="'+data[count].age+'" class="check_box" /></td>';
html += '<td>'+data[count].name+'</td>';
html += '<td>'+data[count].address+'</td>';
html += '<td>'+data[count].gender+'</td>';
html += '<td>'+data[count].designation+'</td>';
html += '<td>'+data[count].age+'</td></tr>';
}
$('tbody').html(html);
}
});
}
fetch_data();
**UPDATE: **Tried this also **更新:**也试过了
$('#myTable').DataTable( {
serverSide: true,
ajax: {
url:"product_fetchmulti.php",
method:"POST",
dataType:"json",
success:function(data)
{
var html = '';
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td><input type="checkbox" id="'+data[count].product_id+'" data-name="'+data[count].product_name+'" data-product_sku="'+data[count].product_sku+'" data-product_status="'+data[count].product_status+'" data-product_quantity="'+data[count].product_quantity+'" data-product_color="'+data[count].product_color+'" class="check_box" /></td>';
html += '<td>'+data[count].product_name+'</td>';
html += '<td>'+data[count].product_sku+'</td>';
html += '<td>'+data[count].product_status+'</td>';
html += '<td>'+data[count].product_quantity+'</td>';
html += '<td>'+data[count].product_color+'</td></tr>';
}
$('tbody').html(html);
}
}
} );
Are you using DataTables plugin ( https://datatables.net/ )?您是否在使用 DataTables 插件( https://datatables.net/ )?
If yes, i think you don't call the datatable function.如果是,我认为您不要调用数据表 function。 That's why you can't search and paginate your tab.
这就是为什么您无法搜索和分页标签的原因。
Following code use JQuery以下代码使用 JQuery
//myTable is your table id
$(document).ready( function () {
$('#myTable').DataTable();
} );
EDIT: According to your edit, you are trying to rewrite the tab when datatable does it for you.编辑:根据您的编辑,您正在尝试在 datatable 为您执行此操作时重写选项卡。 You just have to get your json (with ajax query) and set the columns:
您只需获取 json (使用 ajax 查询)并设置列:
$('#myTable').DataTable(
{ serverSide: true,
"ajax":
{ url:"product_fetchmulti.php",
method:"POST",
dataType:"json",
},
"columns":
[
{"data" : "product_id"}
{"data" : "product_name"}
....
]
});
});
A better way to initialise your datatable would be using the example shown here:初始化数据表的更好方法是使用此处显示的示例:
https://www.datatables.net/examples/ajax/objects.html https://www.datatables.net/examples/ajax/objects.html
Have your Ajax link echo data in the format as shown in the Ajax tab, then set up your JavaScript and HTML as shown in their respective tabs.让您的 Ajax 以 Ajax 选项卡中所示的格式链接回显数据,然后在各自的 C 选项卡 13 中设置您的 JavaScript 和 Z4C4AD5AD5FCA2E7A3FAAED74B。 If you have a query returning an array of objects from a database, you can echo your response like this:
如果您有一个查询从数据库返回一个对象数组,您可以像这样回显您的响应:
$jsonEncoded = '{"data": ' . json_encode($result) . '}';
echo $jsonEncoded;
Finally Solved终于解决了
After '$('tbody').html(html);
'$('tbody').html(html);
之后this line:这一行:
$('#myTable').DataTable({
"columnDefs": [
{ "searchable": true, "targets": 0 }],
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.