`
ssy341
  • 浏览: 58419 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
文章分类
社区版块
存档分类
最新评论

Datatables中文API——基本参数

阅读更多
更多datatables在http://dt.thxopen.com/ 欢迎大家来做客

鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我们更好的使用datatables,本帖将会持续更新……
从基本属性开始吧
bAutoWidth :启用或禁用自动列宽度的计算。
默认值
true
类型
boolean
$(document).ready( function () {
    $('#example').dataTable( {
        "bAutoWidth": false  //关闭后,表格将不会自动计算表格大小,在浏览器大化小化的时候会挤在一坨
    } );
} );


复制代码
bDeferRender :根据官网的介绍翻译过来就是,延期渲染,可以有个速度的提升,当datatable 使用Ajax或者JS源表的数据。这个选项设置为true,将导致datatable推迟创建表元素每个元素,直到他们都创建完成——本参数的目的是节省大量的时间。
默认值:
false
类型:
boolean

$(document).ready( function() {
    var oTable = $('#example').dataTable( {
        "sAjaxSource": "sources/arrays.txt",
        "bDeferRender": true   //这个参数我个人没有使用过,到底是不是这个效果,大家自己去尝试一下
    } );
} );



bFilter :这个很容易明白,启用或禁用过滤数据。在datatable过滤是“智能”,它允许用户 最终输入多个关键字(空格分隔),和每一行数据匹配,即使不是在被指定的顺序(这允许匹配多个列)。注意,如果您希望使用过滤,在datatable中必须设置为true,如果要删除默认过滤输入框和留住过滤功能,请使用{ @link DataTable.defaults.sDom }。这个最后一句不明白,不知道大家怎么理解。
默认值:
true
类型:
boolean

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


bJQueryUI :这个不用多说了,一看就懂,启用jQuery UI样式,(需要在页面添加jQuery的样式文件)。
默认值:
false
类型:
boolean
$(document).ready( function() {
    $('#example').dataTable( {
       "bJQueryUI": true
    } );
} );


bLengthChange :开启一页显示多少条数据的下拉菜单,允许用户从下拉框(10、25、50和100),注意需要分页(bPaginate:true)。
默认值:
true
类型:
boolean

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


bPaginate :开启分页功能,如果不开启,将会全部显示
默认值:
true
类型:
boolean

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


bProcessing :开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
默认值:
false
类型:
boolean

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


bScrollInfinite :是否开启不限制长度的滚动条(和sScrollY属性结合使用),不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据当数据集十分大的时候会有些用处,该选项无法和分页选项同时使用,分页选项会被自动禁止,注意,额外推荐的滚动条会优先与该选项
默认值:
false
类型:
boolean

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


bServerSide :开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
默认值:
false
类型:
boolean

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


bInfo :启用或禁用表信息显示。这显示了关于数据的信息,目前在网页上,包括信息过滤数据,如果行为被执行。这个参数在bServerSide配置后需要用到。
默认值:
true
类型:
boolean

$(document).ready( function () {
    $('#example').dataTable( {
       "bInfo": false//如果这个参数不穿到后台去,服务器分页会报错,据说这个参数包含了表的所有信息
    } );
} );


bSort :开启排序功能,每一列都有排序功能,如果关闭了,排序功能将失效,也可以自定义排序功能。单个列的排序可以禁用“bSortable”选项。
默认值:
true
类型:
boolean

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


bSortClasses :是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class,当该列被排序的时候,可以切换其背景颜色,该选项作为一个来回切换的属性会增加执行时间(当class被移除和添加的时候),当对大数据集进行排序的时候你或许希望关闭该选项
默认值:
true
类型:
boolean

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


bStateSave :是否开启状态保存,当选项开启的时候会使用一个cookie保存表格展示的信息的状态,例如分页信息,展示长度,过滤和排序等。这样当终端用户重新加载这个页面的时候可以使用以前的设置
默认值:
false
类型:
boolean

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


sScrollX :是否开启水平滚动,当一个表格过于宽以至于无法放入一个布局的时候,或者表格有太多列的时候,你可以开启该选项从而在一个可横向滚动的视图里面展示表格,该属性可以是css设置,或者一个数字(作为像素量度来使用)
默认值:
blank string - i.e. disabled
类型:
string

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


sScrollY:是否开启垂直滚动,垂直滚动会驱使DataTable设置为给定的长度,任何溢出到当前视图之外的数据可以通过垂直滚动进行察看当在小范围区域中显示大量数据的时候,可以在分页和垂直滚动中选择一种方式,该属性可以是css设置,或者一个数字(作为像素量度来使用)

默认值:
blank string - i.e. disabled
类型:
string

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


本节完毕,推荐是用ctrl+f查找使用
也希望大家拍砖



更多datatables在http://www.thxopen.com/categories/index.html#Datatables欢迎大家来做客
0
0
分享到:
评论

相关推荐

    DataTables(二) —— 行分组信息展开与折叠的功能实现

    - 初始化DataTables对象,并配置分组参数。例如,使用`columnDefs`设置分组的列索引,以及使用`rowGroup`定义分组行为。 4. **使用`columnDefs`** 在DataTables初始化时,`columnDefs`属性允许我们定义列的行为。...

    Jquery dataTable中文API中文文档

    ### JQuery DataTable API中文文档知识点概览 #### 一、简介 JQuery DataTable 是一个高度灵活且功能丰富的插件,能够将HTML表格转换成具有高级交互性的动态表格。它支持复杂的数据排序、搜索、分页等功能,并能很...

    DataTables API.rar

    这个"DataTables API.rar"压缩包很显然是关于如何使用DataTables API的资源集合,帮助开发者更深入地控制和操作表格数据。下面我们将详细讨论DataTables API以及与之相关的jq(jQuery)知识。 DataTables API提供了...

    datatables-1.9.4-API文档-中文版.zip

    包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; Maven坐标:org.webjars:datatables:1.9.4; 标签:webjars、datatables、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用...

    datatables-cn:Datatables—— jquery 插件中文网

    Datatables中文网 基于 jQuery 的表格插件,灵活,强大 | 1,如何使用? <!--第一步:引入Javascript / CSS (CDN)--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href=...

    dataTables中文网(离线版,外国网页没有离线)

    4. API参考:离线版可能缺少完整的API文档,这在开发过程中可能会造成不便。 如果你需要离线环境中使用DataTables,可以考虑复制一份本地服务器环境,模拟在线请求,将所需的数据和配置预先加载到本地。同时,定期...

    DataTablesApi

    3. **配置DataTables**:通过DataTables的API配置各项参数,例如: ```javascript $('#myTable').DataTable({ dom: 'lfrtip', ordering: true, paging: true, searching: true }); ``` 这里,`dom`定义了...

    dataTables-1.6 API

    DataTables examples This DataTables package comes with a number of examples of how you can use this software, and demonstrates it's capabilities and flexibility.

    datatables_demo

    《datatables_demo——深入解析与应用》 Datatables是一款强大的JavaScript数据展示库,它能够将HTML表格转换为功能丰富的交互式数据展示工具。在“datatables_demo”这个项目中,我们将会探讨如何利用Datatables的...

    datatables-1.9.4-API文档-中英对照版.zip

    包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)-英语-对照版.zip; Maven坐标:org.webjars:datatables:1.9.4; 标签:webjars、datatables、中英对照文档、jar包、java; 使用方法:解压翻译后...

    datatables

    - **扩展功能**:通过调用Datatables的API或使用预定义的插件,进一步增强表格功能。 3. **与jQuery其他表格插件的比较** - **Flextable**:相比于Flextable,Datatables提供了更全面的文档和社区支持,功能更加...

    dataTables导出功能

    DataTables-1.10.21则是DataTables的核心库,包含基本的表格管理功能。 在Buttons插件中,有多种预定义的按钮类型,其中包括导出数据的选项。例如,`csv`, `excel`, `pdf`这些按钮可以分别将表格数据导出为逗号分隔...

    DataTables添加额外的查询参数和删除columns等无用参数实例

    DataTables添加额外的查询参数和删除columns等无用参数实例 DataTables是一个功能强大的JavaScript库,用于在网页中生成高级的表格控件。今天,我们将学习如何在DataTables中添加额外的查询参数和删除无用的columns...

    datatables案例

    在这个“datatables案例”中,网友付裕分享了一个他在 Datatables 中文网第一期交流学习活动中创建的示例。这个示例采用了一种柔和的绿色主题,不仅美观,而且在用户体验上做了优化,特别是对于列宽的调整和行选择...

    DataTables自行封装请求参数和返回数据的零耦合服务端分页示例(PHP&JAVA)

    使用方法: ... ... ...也可使用Eclipse直接导入此项目文件...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示

    dataTables java后台解析http请求参数demo

    在这个"datatables java后台解析http请求参数demo"中,我们将探讨如何利用Java技术在后台处理来自前端DataTable库的HTTP请求参数。DataTable是一款功能强大的jQuery插件,常用于实现动态、可排序、可搜索的数据表格...

    datatables固定头与滚动条适配文件

    在IT行业中,尤其是在网页开发领域,数据展示是一个重要的任务,而`DataTables`是一个非常流行的JavaScript库,用于处理和展示动态表格数据。本文件“datatables固定头与滚动条适配文件”着重解决了一个特定的问题,...

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

Global site tag (gtag.js) - Google Analytics