javascript - dataTable问题,求教
天蓬老师
天蓬老师 2017-04-11 10:14:04
0
1
549

初始化时,展示所有项(数据是写死的dataOrigin)
输入查询条件查询后,重新设置dataOrigin,绘制表格,求教怎么绘制
现在的状况是初始化可以执行,但如果要执行搜索的话一定要注释掉初始化的代码,否则会报错
求教大神

<body>
    <input type="text" name="" id="txt" placeholder="输入姓名搜索"/>
    <input type="button" value="查找" id="btn"/>
    <table id="table">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
    </table>
    <script>
        var dataOrigin=[
            {"name":"mike","gender":"male","age":"20"},
            {"name":"lisa","gender":"female","age":"24"}
        ];
        $(function(){
            var t=$("#table").DataTable({
                "data":dataOrigin,
                "columns":[
                    {"data":"name"},
                    {"data":"gender"},
                    {"data":"age"}
                ],
                "paging":false,
                "searching":false,
                "info":false
            });
            $("#btn").click(function(){
//                重新设置dataOrigin=var dataOrigin=[
//                   {"name":"lisa","gender":"female","age":"24"}
//                ]
//                并绘制表格,求教怎么弄法
                var dataOrigin=[
                    {"name":"lisa","gender":"female","age":"24"}
                ];
                $("#table").DataTable({
                    "data":dataOrigin,
                    "columns":[
                        {"data":"name"},
                        {"data":"gender"},
                        {"data":"age"}
                    ],
                    "paging":false,
                    "searching":false,
                    "info":false
                });
            })
        })
    </script>
</body>
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
黄舟
//只用构造一次datatable
var table = $('#example').DataTable();

如果要对数据更改

API https://datatables.net/refere...

table.clear(); //清除现有
for (var i .....)
    table.row.add({
        数据
        .....
        
    });
table.draw(); //重绘表格

其实如果你的数据都来源于一个完整的表,筛选之后,
你可以用隐藏行来做到,API:https://datatables.net/refere...。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!