jquery datatables 表格插件

之前用的bootstrap的插件做动态搜索，比较麻烦，这几天写个小项目用到动态搜索，找到jquery的datatables插件，很好用。

中文官网地址：http://www.datatables.club/

英文官网地址：https://www.datatables.net/

如下是简单的应用，支持动态搜索。以及排序。

导入js：

    <link rel="stylesheet" href="/static/trouble_run/css/jquery.dataTables.min.css ">
    <link rel="stylesheet" href="/static/trouble_run/css/shCore.css ">
    <script src="/static/trouble_run/js/jquery-2.1.1.min.js"></script>
    <script src="/static/trouble_run/js/jquery.dataTables.min.js"></script>

 数据获取，一般咱们采用 ajax 从后台db获取数据。

ajax：

$.ajax({  
                    　　type:'post',//可选get  
                    　　url:'/query_task/',  
                    　　data:{'id':id},  
                    　　dataType:'JSON',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
                    　　success:function(msg){  
                        var msgObj=msg;  
                        //重新构建table  
                         $('#example').dataTable().fnClearTable();   //将数据清除  
                    　    $('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //数据必须是json对象或json对象数组  
                    　  
                　　},  
                    　　error:function(){  
                    　　alert('error');  
                    　　}  
            })})

 因为该插件需要数据的类型为元组，所以需要函数进行处理如下：

        function packagingdatatabledata(msgObj){

            var editHtml="<a class='btn' data-toggle='modal' href='#modalbackdroptrue' >编辑</a>";  
            var a=[];  
            $.each(msgObj,function(k,key){  
                var tempObj=[];  
 8                 tempObj.push(key['id']);  
                tempObj.push(key['ip']);  
                a.push(tempObj)
                }  
                )
            return a;


                }

html：

                 <table id="example" class="display table-bordered" cellspacing="0" width="100%">
                                <thead>
                                        <tr>
                                                <th>xx</th>
                                                <th>xx</th>
                   
                                        </tr>
                                </thead>
                        </table>

只需要后台传入生成json串，传到前端即可，由于不同的语言开发的不一样，不在表述。

效果：

支持排序分页。

更多配置可以去官网查看。