zoukankan      html  css  js  c++  java
  • datatable 参数详细说明

     

    页面参数说明

     

    var docrTable = $('#docrevisontable').dataTable({ 

    language:lang, //提示信息
    autoWidth: false, //禁用自动调整列宽
    stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
    processing: true, //隐藏加载提示,自行处理
    serverSide: true, //启用服务器端分页
    searching: false, //禁用原生搜索
    orderMulti: false, //启用多列排序
    order: [], //取消默认排序查询,否则复选框一列会出现小箭头 

    "pagingType": "simple_numbers",  //分页样式:simple,simple_numbers,full,full_numbers

    "bProcessing" : true, //DataTables载入数据时,是否显示‘进度’提示  
    "bServerSide" : true, //是否启动服务器端数据导入  
    "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
    "bJQueryUI" : true, //是否使用 jQury的UI theme  
    "bPaginate" : true,// 分页按钮  
    "bFilter" : false,// 搜索栏  
    "bLengthChange" : true,// 每行显示记录数  
    "iDisplayLength" : 10,// 每页显示行数  
    "bSort" : false,// 排序  
    "bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息  
    "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, //是否启动过滤、搜索功能
    "bVisible" : false, //此列不显示  

       "aoColumns" : [{ 

      "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" 

      }], 

                   "oLanguage": { //国际化配置 

            "sProcessing" : "正在获取数据,请稍后...",   

            "sLengthMenu" : "显示 _MENU_ 条",   

            "sZeroRecords" : "没有您要搜索的内容",   

            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",   

            "sInfoEmpty" : "记录数为0",   

            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",   

            "sInfoPostFix" : "",   

            "sSearch" : "搜索",   

            "sUrl" : "",   

            "oPaginate": {   

                   "sFirst" : "第一页",   

                   "sPrevious" : "上一页",   

                   "sNext" : "下一页",   

                   "sLast" : "最后一页"   

            } 

    })

     

     

    默认情况下 Datatables 的分页就是上一页、下一页和6个页数按钮,这适合大部分情况。不过也有用户不喜欢这样,Datatables提供了四个模式供用户选择,通过设置pagingType选项来配置

    • numbers - 只有只有数字按钮
    • simple - 只有上一页、下一页两个按钮
    • simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个
    • full - 有四个按钮首页、上一页、下一页、末页
    • full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮
    • first_last_numbers - 除首页、末页两个按钮还有页数按钮
  • 相关阅读:
    sql中触发器的使用
    sql中优化查询
    sql中case when语句的使用
    CSRF学习小结
    javascript正则表达式笔记
    elementUI单选框获取值
    elementUI内置过渡(折叠)
    elementUI内置缩放过渡(缩放)
    elementUi内置过渡动画(淡入)
    创建koa2项目
  • 原文地址:https://www.cnblogs.com/qingqinglanlan/p/9140802.html
Copyright © 2011-2022 走看看