Ajax加载数据,完全打印整个表,DataTables功能均不起作用

时间:2019-06-03 09:09:45

标签: jquery datatables

我已经成功设置了DataTables。但是现在我希望使用Ajax(服务器端处理)加载数据。问题是,每当页面加载时,整个表的所有数据都会显示出来,而DataTables的功能都不再起作用。我正在使用NodeJS,请在后端表示。

这是表格现在的样子:

image 1

我的快递后端:

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" }
   ]
});
});

0 个答案:

没有答案