JQuery DataTable 详解

最新推荐文章于 2024-08-01 11:09:48 发布

转载最新推荐文章于 2024-08-01 11:09:48 发布 · 1.8k 阅读

本文介绍如何通过fnReloadAjax方法实现DataTable数据的动态刷新。具体步骤包括：导入必要的JavaScript文件，设置DataTable的基本配置，定义查询按钮及点击事件处理函数，通过清除表数据并重新加载来更新显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提准备：导入fnReloadAjax.js，附上下载链接
https://pan.baidu.com/s/1qYRMX9i

第一：实现的效果就是根据查询条件点击查询按钮刷新表格数

1、查询按钮

<button onclick="queryStation()">查询</button>
 1

2、初始化表格

$("#stationTable").DataTable({
                //表格基本配置，根据自己需求设置
                "paging" : true,
                "lengthChange" : true,
                "searching" : false,
                "ordering" : false,
                "info" : true,
                "autoWidth" : false,
                "bStateSave" : true,
                "bFilter" : true,
                "oLanguage" : {
                    "sUrl" : "plugins/datatables/lang_zh.txt",
                },
                //刷新数据的重点，请求数据源
                ajax : {
                    //地址
                    url : "queryStationWithCityCode",
                    type : "POST",
                    dataType : "json",
                    contentType : "application/x-www-form-urlencoded; charset=UTF-8",
                    error : function(data,e){
                        alert("系统繁忙，请稍后重试！");
                    },
                    //此处不需要写ajax的success回调
                },
                //请求回数据，对表格列进行赋值（此处每一列都需赋值）
                "columns": [  
                    { "data": "cityName","targets": -1},  
                    { "data": "townName","targets": -2 },  
                    { "data": "name","targets": -3 },  
                    { "data": "address" ,"targets": -4},  
                    { "data": "contacts","targets":-5 },
                    { "data": "phone","targets":-6 },
                    { "data": "holidayFlag","targets":-7 },
                    { "data": "periodFlag","targets":-8 },
                    { "data": "id","targets":-9 },
                    { "data": "id","targets":-9 },
                ], 
                //自定义列数据
                "columnDefs": [  
                    {  
                       "render": function ( data, type, 
                row ) { 
                        //data为当前列的数据
                        //type为当前列数据类型
                        //row为当前行数据
                        var rowData=JSON.stringify(row); 
                        var str = "<a class='herf='javascript:void(0)' onclick='changeModal("+rowData+")'>联系人</a>";
                            return str;
                            //此处return可自己定义，博主此处举例为超链接，传参须注意，若传字符串需加上转义字符，否则会报错ReferenceError: XXX is not defined at HTMLAnchorElement.onclick
                        }, 
                        //此处target负数表示从右向左的顺序
                        //-1为右侧第一列 
                        "targets": -1 
                   },
                   {  
                       "render": function ( data, type, row ) { 
                            var str =JSON.stringify(row);
                            return "<a class='herf='#' onclick='deleteModal("+str+")'>删除</a>";
                        },  
                        "targets": -2
                   },
                 ],
                "createdRow": function ( row, data, index ) {  
                    //创建行之后的操作
                },
            });
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

3、查询触发点击事件，刷新表格数据
这里写图片描述

<script type="text/javascript">
        //查询
        function queryStation(){
            var cityCode = $("#sel_town").val();
            var parentCode = $("#sel_city").val();
            var table = $("#stationTable").dataTable();
            //清除表格数据
            table.fnClearTable();
            //重新请求数据（不写参数代表请求初始化时的默认接口数据）
          table.fnReloadAjax("queryStationWithCityCode?cityCode="+cityCode+"&parentCode="+parentCode);
        }
    </script>