• Jquery DataTables学习笔记(一)


    准备工作:

    了解DataTables

    官方网站:http://www.datatables.net/

    简介:DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。

    主要特点:

    • 自动分页处理
    • 即时表格数据过滤
    • 数据排序以及数据类型自动检测
    • 自动处理列宽度
    • 可通过CSS定制样式
    • 支持隐藏列
    • 易用
    • 可扩展性和灵活性
    • 国际化
    • 动态创建表格
    • 免费的 
    参数初始化:

    bAutoWidth 

    是否启用自动适应列宽

    默认值:True

    示例代码: 

    $(document).ready( function () {
      $('#example').dataTable( {
        "bAutoWidth": false
      } );
    } );

     bDeferRender 

     是否启用延迟加载:当你使用AJAX数据源时,可以提升速度。

     默认值:False

    示例代码:

    $(document).ready(function() {
      var oTable = $('#example').dataTable( {
        "sAjaxSource": "sources/arrays.txt",
        "bDeferRender": true
      } );
    } ); 

    bFilter 

    是否启用内置搜索功能:可以跨列搜索。

    默认值:True 

    示例代码:

     $(document).ready( function () {
      $('#example').dataTable( {
        "bFilter": false
      } );
    } );

    bInfo  

     是否显示表格相关信息:例如翻页信息等。

    默认值:True 

    示例代码: 

    $(document).ready( function () {
      $('#example').dataTable( {
        "bInfo": false
      } );
    } ); 

    bJQueryUI

    是否启用  jQuery UI 皮肤插件支持

    默认值:False

    示例代码: 

    $(document).ready( function() {
      $('#example').dataTable( {
        "bJQueryUI": true
      } );
    } ); 

     bLengthChange

    是否允许用户,在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持

    默认值:True

    示例代码: 

     $(document).ready( function () {
      $('#example').dataTable( {
        "bLengthChange": false
      } );
    } );
    bPaginate 

    是否开启分页

    默认值:Ture

    示例代码:

     $(document).ready( function () {
      $('#example').dataTable( {
        "bPaginate": false
      } );
    } );


    bProcessing 

     是否启用进度显示,进度条等等,对处理大量数据很有用处。

    默认值:false

    示例代码: 

    $(document).ready( function () {
      $('#example').dataTable( {
        "bProcessing": true
      } );
    } );

    bScrollInfinite  

    是否开启内置滚动条,并且显示所有数据

    默认值:fasle 

     示例代码: 

    $(document).ready(function() {
      $('#example').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px"
      } );
    } );

     bServerSide

    是否启用服务器处理数据源,必须sAjaxSource指明数据源位置

    默认值:False

    示例代码:


    $(document).ready( function () {
      $('#example').dataTable( {
        "bServerSide": true,
        "sAjaxSource": "xhr.php"
      } );
    } );

     bSort 

    是否开启列排序功能,如果想禁用某一列排序,可以在每列设置使用bSortable参数

     默认值:True

    示例代码: 

    $(document).ready( function () {
      $('#example').dataTable( {
        "bSort": false
      } );
    } );


     bSortClasses  

    不清楚是做什么用的,如果处理大量数据时,必须关闭(有人知道吗?)

    默认值:False

    示例代码:

    $(document).ready( function () {
      $('#example').dataTable( {
        "bSortClasses": false
      } );
    } );


    bStateSave  

     是否开启cookies保存当前状态信息

     默认值:false

     示例代码:

    $(document).ready( function () {
      $('#example').dataTable( {
        "bStateSave": true
      } );
    } );


    sScrollX 

    是否开启水平滚动条

    默认值:空 (字符串类型)

     示例代码:

    $(document).ready(function() {
      $('#example').dataTable( {
        "sScrollX": "100%",
        "bScrollCollapse": true
      } );
    } );

      

    sScrollY

     是否开启垂直滚动条,滚动条大小受限于Datatable的高度大小

    默认值:空 (字符串类型)

    示例代码:

    $(document).ready(function() {
      $('#example').dataTable( {
        "sScrollY": "200px",
        "bPaginate": false
      } );
    } );


     
  • 相关阅读:
    洛谷P2331 [SCOI2005]最大子矩阵 DP
    洛谷P2216: [HAOI2007]理想的正方形 单调队列优化DP
    牛客练习赛38 E 出题人的数组 2018ccpc桂林A题 贪心
    zstu19一月月赛 duxing201606的原味鸡树
    gym/102021/J GCPC18 模拟拼图
    gym/102021/K GCPC18 背包dp算不同数和的可能
    洛谷 P2051 [AHOI2009]中国象棋 状态压缩思想DP
    洛谷 P1070 道路游戏 DP
    洛谷P2577 [ZJOI2005]午餐 打饭时间作为容量DP
    动态规划:插头DP
  • 原文地址:https://www.cnblogs.com/CnKker/p/2516058.html
Copyright © 2020-2023  润新知