您的位置: 首页  >  文章  >  jquery表格插件——Datables的浅显学习

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

分类: 文章 • 2024-11-01 13:04:29

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

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

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

在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了哦，大概就是做成这个样子。然后后续还可以添加功能调调样式不断完善。


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


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



															

																					

								

									相关推荐