jquery表格插件——Datables的浅显学习

2017-10-19 21:14:37来源:CSDN作者:javaTestone人点击

分享

前段时间学习了一下datatables插件,然后自己试着写了一个简单的应用。其实datatables官网也讲得很详细了也有很多例子。但是对于我这个菜鸟来说从后台读取ajax数据再展示到表格中还是绕了很多弯路的。然后看了很多文章还是感觉还是没有一篇完全适合我,所以,还是自己也写一写 步骤 好了,日后自己也可以翻阅翻阅。由于从未发表过什么长篇的博文,还算是处女作了,哈哈哈。

毕竟是插件,肯定要引入文件的啦。如下图,这个官网截图。最好还是把它下载到本地引用啦。除了这个我也引用了bootstrap文件让表格看上去好看那么一些些,反正这下面两个文件引入了就行。

                

在html部分的话就是这样,超简单的。

<table id="example" class="table table-striped table-bordered" cellspacing="0">    <thead>    <tr>        <th><input class="choose-all" type="checkbox"></th>        <th>id</th>        <th>用户名</th>        <th>用户密码</th>        <th>机构名</th>        <th>机构代码</th>        <th>状态码</th>        <th>数据更新时间戳</th>        <th>操作</th>    </tr>    </thead>    <tbody></tbody>    <tfoot>    <tr>        <th><input class="choose-all" type="checkbox"></th>        <th>id</th>        <th>用户名</th>        <th>用户密码</th>        <th>机构名</th>        <th>机构代码</th>        <th>状态码</th>        <th>数据更新时间</th>        <th>操作</th>    </tr>    </tfoot></table>

        在js代码部分:

    $(function(){        $.ajax({            url: '你的url',            type: 'GET',            success: function (data) {                var table=$("#example").DataTable({                    language: {                         "sProcessing": "处理中...",                        "sLengthMenu": "每页 _MENU_ 项",                        "sZeroRecords": "没有匹配结果",                        "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",                        "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",                        "sInfoPostFix": "",                        "sSearch": "搜索:",                        "sUrl": "",                        "sEmptyTable": "表中数据为空",                        "sLoadingRecords": "载入中...",                        "sInfoThousands": ",",                        "oPaginate": {                            "sFirst": "首页",                            "sPrevious": "上页",                            "sNext": "下页",                            "sLast": "末页",                            "sJump": "跳转"                        },                        "oAria": {                            "sSortAscending": ": 以升序排列此列",                            "sSortDescending": ": 以降序排列此列"                        }                    },                    pageLength:3,//默认每页显示数据条数                    data:data.data.list,
		   /*这里的data我还是解释一下,因为datatable是支持json格式的,像这种{    data: [        {
 		 id: 1,            name: "tony", 

        }, 
        {         
		 id: 2,            name: "helen",

        }, 
        { 
		 id: 3,            name: "jack",

        }, 

    ]
}
 我打印出来的data里面data中的list就相当于上面json数组的data。所以就将data.data.list赋值给了data。所以
这就要具体看你从后台传过来的数据是怎样的,如果不是json格式的还要转化一下转成json格式  */
              
		    aLengthMenu: [3, 5, 7], //更改显示记录数选项
paging: true,//是否启用分页
		    ordering:true,//是否启用排序
searching: true,//搜索
		    pagingType:"full_numbers", 
columns: [
				{data:'',render:function(){   
return '<input type="checkbox" name="items" class="choose-one"> ' }, }},
			//当你要打印一些button或者不能对应到data数据时,可以用render写,我上面就是
			//添加了一个复选框	                 
{ data: 'id' },
			{ data: 'username' },  
{ data: 'password' },
  			{ data: 'orgName' },
{ data: 'orgNo' },
			{ data: 'status' }, 
{data:'updatedAtTime'},
{ data
: '',render: function(){
return '<div class="btn-group-sm">' +
'<a class="btn btn-sm btn-info editbtn">' +
'<i class="fa fa-edit">编辑</i></a> ' +
'<a class="deleteBtn btn btn-sm btn-danger">' +
 		         '<i class="fa fa-trash">删除</i></a> </div>' }  
                      } ]  
});
 //在render方法中可以在表格中添加编辑、删除的按钮哟。但是这个click事件要写在ajax里面才有用哦
//还有一点值的注意的就是<th>的数量要跟columns里面data数量一致哦。不然会报nth什么什么的错误。
//一直不喜欢查错误原因的我被这个弄傻了,结果查原因我。。。就这么个小问题
} });

就这样,然后就ok了哦,大概就是做成这个样子。然后后续还可以添加功能调调样式不断完善。



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台