JQuery DataTables相关

0.引用需要有JQuery bootStrap支持引用如下

   <script src="js/jquery.min.js"></script>
   <link href="js/bootstrap.min.css" rel="stylesheet" />
   <link href="js/datatables.min.css" rel="stylesheet" />
   <script src="js/datatables.min.js"></script>

1.数据json如下

<body>


    <table id="tbl_user" class="table table-bordered ">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>密码</th>
            </tr>

        </thead>
    </table>

    <script>
        vardata = [
            { "Code": "001","Name":"张三","Pwd":"123" },
            { "Code": "002","Name":"李四","Pwd":"123" },
            { "Code": "003","Name":"王五","Pwd":"123" },
        ]
        //$("#tbl_user").DataTable().destroy();
        $("#tbl_user").DataTable({

            "bPaginate": false, //翻页功能
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bSort": false, //排序功能
            "bInfo": false,//页脚信息
            "bAutoWidth": true,//自动宽度
            retrieve: true,
            data: vardata,
            
            columns: [//列设置
                { title: "编号", data: "Code" },
                { title: "名称", data: "Name" },
                { title: "密码", data: "Pwd", visible: false }
            ]
        });

    </script>

</body>

2.如果我要通过点击一个按钮重新给datatable赋值需要满足三个条件：第一html中必须有thead ;第二th必须与js中的列一一对应;第三要先重置表格 $("#tbl_user").DataTable().destroy();代码如下：

<body>


    <table id="tbl_user" class="table table-bordered ">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>密码</th>
            </tr>

        </thead>
    </table>

    <button id="btnNewData" >重新赋值</button>

    <script>
        vardata = [
            { "Code": "001","Name":"张三","Pwd":"123" },
            { "Code": "002","Name":"李四","Pwd":"123" },
            { "Code": "003","Name":"王五","Pwd":"123" },
        ]

        vardata1= [
            { "Code": "sss","Name":"王采云","Pwd":"123" },
            { "Code": "www","Name":"李贵","Pwd":"123" },
            { "Code": "ddd","Name":"张小峰","Pwd":"123" },
        ]
      
        $("#tbl_user").DataTable({

            "bPaginate": false, //翻页功能
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bSort": false, //排序功能
            "bInfo": false,//页脚信息
            "bAutoWidth": true,//自动宽度
            //retrieve: true,
            data: vardata,
            
            columns: [//列设置
                { title: "编号", data: "Code" },
                { title: "名称", data: "Name" },
                { title: "密码", data: "Pwd", visible: false }
            ]
        });

        $("#btnNewData").click(function () {
            $("#tbl_user").DataTable().destroy();
            $("#tbl_user").DataTable({

            "bPaginate": false, //翻页功能
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bSort": false, //排序功能
            "bInfo": false,//页脚信息
            "bAutoWidth": true,//自动宽度
            //retrieve: true,
            data: vardata1,
            
            columns: [//列设置
                { title: "编号", data: "Code" },
                { title: "名称", data: "Name" },
                { title: "密码", data: "Pwd", visible: false }
            ]
        });
        })
    </script>

</body>

JQuery DataTables相关

猜你喜欢