Jquery dataTable进行ajax请求动态加载数据

小渣渣

前台代码：

1. <table id="example1" class="table table-bordered table-striped">
   
2.                             <thead>
   
3.                                 <tr>
   
4.                                     <th>站点名称</th>
   
5.                                     <th>站点域名</th>
   
6.                                     <th>认证方式</th>
   
7.                                 </tr>
   
8.                             </thead>
   
9.                             <tbody id="aaaa">
   
10.                                 
    
11.                             </tbody>
    
12.                             <tfoot>
    
13.                                 <tr>
    
14.                                     <th>Rendering engine</th>
    
15.                                     <th>Browser</th>
    
16.                                     <th>Platform(s)</th>
    
17.                                 </tr>
    
18.                             </tfoot>
    
19.                         </table>

复制代码

1. $('#example1').dataTable({
   
2.                 "bPaginate": true,
   
3.                 "bLengthChange": false,
   
4.                 "bSort": true,
   
5.                 "bInfo": true,
   
6.                 "bAutoWidth": false,
   
7.                 "bFilter": true,
   
8.                 "ajax": '/Login/Data',
   
9.                 "columns": [
   
10.                     { "data": "name" },
    
11.                     { "data": "bewrite" },
    
12.                     { "data": "Descrip{过滤}tion" }
    
13.                 ],
    
14.                 "oLanguage": {
    
15.                     "sLengthMenu": "每页显示 _MENU_ 条记录",
    
16.                     "sZeroRecords": "对不起，查询不到任何相关数据",
    
17.                     "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
    
18.                     "sInfoEmtpy": "找不到相关数据",
    
19.                     "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
    
20.                     "sProcessing": "正在加载中...",
    
21.                     "sSearch": "搜索",
    
22.                     "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascrip{过滤}t/datatable/dtCH.txt
    
23.                     "oPaginate": {
    
24.                         "sFirst": "第一页",
    
25.                         "sPrevious": " 上一页 ",
    
26.                         "sNext": " 下一页 ",
    
27.                         "sLast": " 最后一页 "
    
28.                     }
    
29.                 }
    
30.             });

复制代码

后台代码：

1. [HttpGet]
   
2.         public JsonResult Data()
   
3.         {
   
4.             List<BLL.Models.GetDictionary> list = BLL.Until.GetUserInfo.GetUser();
   
5.             return Json(new { data = list },JsonRequestBehavior.AllowGet);
   
6.         }

复制代码

其中注意的是：dataTable默认是get请求，post会请求不到数据，然后json要设置JsonRequestBehavior.AllowGet这个允许所有get请求方式。

最后附上官方说明文档：https://datatables.net/examples/ajax/