我已经成功设置了DataTables。但是现在我希望使用Ajax(服务器端处理)加载数据。问题是,每当页面加载时,整个表的所有数据都会显示出来,而DataTables的功能都不再起作用。我正在使用NodeJS,请在后端表示。
这是表格现在的样子:
我的快递后端:
adminModel.product(function(product) {
if (product) {
let dtProducts={};
dtProducts.data=product;
res.send(dtProducts);
} else {
res.status(401).json({
data: undefined,
success: false
});
}
});
JSON数据格式:
[ RowDataPacket {
id: 'HJNGANpf7',
sId: '2',
sName: 'Jaber Al Rafian',
productsDate: '0000-00-00',
productsTime: '12:00:00 AM',
brand: 'gucci',
item: 'handbag',
color: '',
size: '-S,-M,-L',
style: '',
location: '',
quantity: '',
packingList: '',
fobPrice: 0,
status: 'varified',
featured: 0 },
.....so on
]
HTML部分:
<table class="table table-hover table-bordered table-dark table-responsive table-sm" id="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Seller Name</th>
<th scope="col">Brand</th>
<th scope="col">Item</th>
<th scope="col">Color</th>
<th scope="col">Location</th>
<th scope="col">Quantity</th>
<th scope="col">FOB price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
jQuery部分(DataTables初始化)
$(document).ready(function() {
$('#table').DataTable({
rowReorder: {
selector: 'td:nth-child(0)'
},
responsive: true,
processing: true,
serverSide: true,
Filter: true,
stateSave: true,
ordering:false,
type:"POST",
"ajax":{
"url": "/admin/test/ajax/products",
"type": "POST"
},
columns: [
{ data : "productsDate", name: 'productsDate' },
{ data : "productsTime",name : "productsTime"},
{ data : "sName" , name : "sName" },
{ data : "brand",name : "brand" },
{ data : "item",name : "item"},
{ data : "color", name : "color" },
{ data : "location", name : "location"},
{ data : "quantity",name : "quantity" },
{ data : "fobPrice",name : "fobPrice" }
]
});
});