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>