使用 jquery-datatables 获取数据

Posted

技术标签:

【中文标题】使用 jquery-datatables 获取数据【英文标题】:Getting data using jquery-datatables 【发布时间】:2019-08-22 23:32:53 【问题描述】:

我想从后端对数据进行分页,并且我想使用 jquery 数据表下载包含所有数据的 csv 表,但是由于它已经分页,所以 csv 只会返回第一页.. 有没有办法获取所有数据使用 jquery 数据表而不修改服务器端 url 或者我应该在不使用 jquery 数据表的情况下从后端完成所有工作和 csv 处理?

【问题讨论】:

您应该有另一个端点来导出 CSV,然后使用未分页的数据将所有对象返回给您。 【参考方案1】:

你需要遵循这个: Server side Process

【讨论】:

【参考方案2】:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <link rel="stylesheet" type="text/css"
        href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () 
            $.ajax(
                url: 'EmployeeService.asmx/GetEmployees',
                method: 'post',
                dataType: 'json',
                success: function (data) 
                    $('#datatable').dataTable(
                        paging: true,
                        sort: true,
                        searching: true,
                        scrollY: 200,
                        data: data,
                        columns: [
                             'data': 'Id' ,
                             'data': 'FirstName' ,
                             'data': 'LastName' ,
                             'data': 'Gender' ,
                             'data': 'JobTitle' ,
                            
                                'data': 'WebSite',
                                'sortable': false,
                                'searchable': false,
                                'render': function (webSite) 
                                    if (!webSite) 
                                        return 'N/A';
                                    
                                    else 
                                        return '<a href=' + webSite + '>'
                                            + webSite.substr(0, 10) + '...' + '</a>';
                                    
                                
                            ,
                            
                                'data': 'Salary',
                                'render': function (salary) 
                                    return "$" + salary;
                                
                            ,
                            
                                'data': 'HireDate',
                                'render': function (jsonDate) 
                                    var date = new Date(parseInt(jsonDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                
                            
                        ]
                    );
                
            );
        );
    </script>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div style="width: 900px; border: 1px solid black; padding: 3px">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</body>
</html>

【讨论】:

以上是关于使用 jquery-datatables 获取数据的主要内容,如果未能解决你的问题,请参考以下文章

jQuery-DataTables相关的网址

jquery-datatables 怎么自定义排序

jQuery - 数据表,如何获取列 ID

JS datatable表中的某一列如何获取

Laravel数据表按钮插件

datatable的使用