javascript 带有 Node.js 的 jQuery 数据表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30836514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:45:59  来源:igfitidea点击:

jQuery DataTables with Node.js

javascriptjquerynode.jsdatatablesjquery-datatables

提问by Raj

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.

所以我想用datatables插件实现一个分页表,这是我第一次使用这个插件。我遵循了插件的文档,并尝试通过使用 Ajax 从服务器获取值,如插件文档中所述。

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

一旦我发出 get 请求,我似乎收到以下错误,但我不确定为什么?

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:

返回的 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: '[email protected]' } ], searchStatus: 'Success', eBayUserID: '', errorCode: '0', rowCount: '6', pageNumber: '1', paginationValue: '1', paypalLoginID: '[email protected]' }

{ 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: '[email protected]' } ], searchStatus: 'Success', eBayUserID: '', errorCode: '0', rowCount: '6', pageNumber: '1' , paginationValue: '1', paypalLoginID: '[email protected]' }

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

很高兴知道是否有人曾使用 node.js 服务器端处理数据表

回答by davidkonrad

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

您需要定义dataSrccolumns.data- 以下应该工作:

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>  
  • dataSrcto specify what the array holding row items is named (cause of "Cannot read property 'length' of undefined")
  • columns.datato map item properties to columns
  • dataSrc指定保存行项目的数组的名称(原因是“无法读取未定义的属性‘长度’”)
  • columns.data将项目属性映射到列

回答by Danny Sofftie

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

您根本不必理会服务器端处理。我使用了一种简单的方法来欺骗dataTables初始化。

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 dataTablesand make it so that it delays before initialization.

首先,您需要通过您最喜欢的方式获取要在表中显示的数据,在确认数据显示良好后,现在前往初始化的位置dataTables并使其在初始化之前延迟。

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.

例如,在我的例子中,我给了它 100 毫秒的延迟,它就像一个魅力。