带有Node.js的jQuery DataTables

Question

So i am trying to implement a pagination table with the datatables plugin, this is my first time using this plugin. I followed the documentation on the plugin and tried to get the values from the server through the use of Ajax, as per presented in the plugins documentation.

I seem to be getting the following error once i make the get request and i am unsure of why?

Error: Uncaught TypeError: Cannot read property 'length' of undefined

On client side i have the following code

viewReports = {
    init: function(){
        $('#paginatedData').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": '/viewreports'
        });

    }
};

$(document).ready(viewReports.init);

In my server side i have the following

router.get('/viewreports', function(res, req){

    async.parallel({
        viewReports: function(callback){
            restCall('/rest/bugbounty/latest/message/searchReport', 'POST', parameters, function(data){
                callback(null, data);
            }); 
        }
    }, function(err, result){
        if(!err){
            res.send(result.viewReports);
            res.render('viewreports');
        }
    });
});

Returned JSON:

{ reportList: [ { reportID: 'EIBBP-448', eBayUserID: ' ', reportStatus: 'New', summary: 'BugBounty Report created by Raj', lastUpdatedDate: '2015-06-15 01:05', createdDate: '2015-06-15 01:05', paypalLoginID: 'raaj@paypal.com' } ], searchStatus: 'Success', eBayUserID: '', errorCode: '0', rowCount: '6', pageNumber: '1', paginationValue: '1', paypalLoginID: 'raaj@paypal.com' }

It would be great to know if there is anyone who has worked with node.js server side processing for datatables

Answer 1

You need to define dataSrc and columns.data - the following should work :

var table = $('#example').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "/viewreports",
        dataSrc: "reportList"
    },    
    columns: [ 
        { data : "reportID" },
        { data : "eBayUserID" },
        { data : "reportStatus" },
        { data : "summary" },
        { data : "lastUpdatedDate" },        
        { data : "createdDate" },        
        { data : "paypalLoginID" }
   ]     
}); 

on an empty table :

<table id="example"></table>  

• dataSrc to specify what the array holding row items is named (cause of " Cannot read property 'length' of undefined ")
• columns.data to map item properties to columns

Answer 2

You simply don't have to bother with the server side processing. I used a simple way to trick dataTables initialization.

First, you will need to fetch the data you want to display in the table through your most preferred way, after you have confirm that data displays well, now head to where you initialize dataTables and make it so that it delays before initialization.

setTimeout(() => {
    $('#yourtable').dataTable({
        // datatables customization options
    });
}, 100)

For example, in my case I gave it a delay of 100ms, and it works like a charm.