Ajax загружает данные, печатает всю таблицу целиком, ни одна из функций DataTables не работает - PullRequest
1 голос
/ 03 июня 2019

Я успешно настроил 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" }
   ]
});
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...