jquery datatables 初始化配置归纳

稍稍归纳了一下datatables的初始化配置方法,更为详细的配置及用法请参考https://datatables.net/examples/index
var oTable = $('#table').dataTable({
        "bProcessing" : true, //DataTables载入数据时,是否显示‘进度’提示 
        "bServerSide" : true, //是否启动服务器端数据导入 
        "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态 
        "bJQueryUI" : true, //是否使用 jQury的UI theme 
        "sScrollY" : 450, //DataTables的高 
        "sScrollX" : 820, //DataTables的宽 
        "aLengthMenu" : [20, 40, 60], //更改显示记录数选项 
        "iDisplayLength" : 40, //默认显示的记录数 
        "bAutoWidth" : false, //是否自适应宽度 
        "bScrollInfinite" : false, //是否启动初始化滚动条 
        "bScrollCollapse" : true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变 
        "bPaginate" : true, //是否显示(应用)分页器 
        "bInfo" : true, //是否显示页脚信息,DataTables插件左下角显示记录数 
        "sPaginationType" : "full_numbers", //详细分页组,可以支持直接跳转到某页 
        "bSort" : true, //是否启动各个字段的排序功能 
        "aaSorting" : [[1, "asc"]], //默认的排序方式,第2列,升序排列 
        "bFilter" : true, //是否启动过滤、搜索功能 
        "oLanguage": { //国际化配置 
            "sProcessing" : "正在获取数据,请稍后...",   
            "sLengthMenu" : "显示 _MENU_ 条",   
            "sZeroRecords" : "没有您要搜索的内容",   
            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",   
            "sInfoEmpty" : "记录数为0",   
            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",   
            "sInfoPostFix" : "",   
            "sSearch" : "搜索",   
            "sUrl" : "",   
            "oPaginate": {   
                "sFirst" : "第一页",   
                "sPrevious" : "上一页",   
                "sNext" : "下一页",   
                "sLast" : "最后一页"   
            } 
        }
            "aoColumns" : [{                //设置列属性aoColumnDefs设置列的属性时,可以任意指定列
                "mDataProp" : "USERID",  
                "sDefaultContent" : "", //此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错  
                "bVisible" : false //此列不显示  
            }, {  
                "mDataProp" : "USERNAME",  
                "sTitle" : "用户名",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }, { 
                "mDataProp" : "EMAIL",  
                "sTitle" : "电子邮箱",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }, {  
                "mDataProp" : "MOBILE",  
                "sTitle" : "手机",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }, {  
                "mDataProp" : "PHONE",  
                "sTitle" : "座机",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }, {  
                "mDataProp" : "NAME",  
                "sTitle" : "姓名",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }, {  
                "mDataProp" : "ISADMIN",  
                "sTitle" : "用户权限",  
                "sDefaultContent" : "",  
                "sClass" : "center"  
            }],  
                          
            "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
            /* 用来改写用户权限 */  
                if (aData.ISADMIN == '1')  
                    $('td:eq(5)', nRow).html('管理员');  
                if (aData.ISADMIN == '2')  
                    $('td:eq(5)', nRow).html('资料下载'); 
                if (aData.ISADMIN == '3')  
                    $('td:eq(5)', nRow).html('一般用户');  
                return nRow;  
            },  
                "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),  
                    //服务器端,数据回调处理  
                "fnServerData" : function(sSource, aDataSet, fnCallback) {  
                    $.ajax({  
                        "dataType" : 'json',  
                        "type" : "POST",  
                        "url" : sSource,  
                        "data" : aDataSet,  
                        "success" : fnCallback  
                    });  
                }  
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery DataTables 是一个强大的表格插件,可以帮助开发人员快速实现功能丰富的数据表格。 首先,在使用这个插件之前,需要在项目中引入 jQueryDataTables 的相关文件。可以通过将它们下载到本地并引用,或者使用 CDN 服务引用它们。 一旦引入了必要的文件,就可以开始使用 DataTables。 首先,需要将 HTML 表格元素转换成 DataTables,可以使用如下方式: ```javascript $(document).ready(function() { $('#myTable').DataTable(); }); ``` 上述代码将选择具有 id 为 "myTable" 的表格元素,并将其转换为 DataTables。 接下来,可以在 DataTables配置各种选项,以满足项目的需求。例如,可以设置表格的列宽度、排序方式、是否显示搜索框等等。可以通过在 DataTables 初始化函数中传递一个配置对象来实现这些功能。例如: ```javascript $(document).ready(function() { $('#myTable').DataTable({ "columnDefs": [ { "width": "20%", "targets": 0 }, // 设置第一列的宽度为20% { "orderable": false, "targets": 2 } // 第三列禁止排序 ], "searching": false // 禁用搜索框 }); }); ``` 除了基本的配置选项外,DataTables 还提供了许多其他功能,例如分页、导出数据、自定义过滤等等。这些功能可以通过配置项或使用插件来实现。 DataTable还提供了许多API方法,可以进行表格的操作,如添加、删除、更新数据等。例如,可以使用 `row().data()` 方法获取表格的某一行数据,并对其进行修改。 上述是对 jQuery DataTables 的简要介绍,它为我们提供了一种简单高效的方式来管理和操作数据表格,帮助我们快速构建功能丰富的表格界面。通过深入学习官方文档和示例,掌握其更多高级用法,可以更好地利用该插件来满足各类项目的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值