转 Datatables中文API——基本参数
鉴于自己一直在使用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中文API——基本参数的更多相关文章
- [转载]fullPage.js中文api 配置参数~
fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...
- Datatables中文API——回调函数
fnCookieCallback:还没有使用过 $(document).ready(function () { $('#example').dataTable({ "fnCookieCall ...
- JQuery Datatables Columns API 参数详细说明
---恢复内容开始--- Data Tables: http://datatables.NET/ Version: 1.10.0 Columns说明 虽然我们可以通过DOM直接获取DataTables ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- [置顶] COcos2d-X 中文API
本文来自http://blog.csdn.net/runaying ,引用必须注明出处! COcos2d-X 中文API 温馨提醒:使用二维码扫描软件,就可以在手机上访问我的博客啦!另外大家可以访问另 ...
- Android 中文 API (40) —— RatingBar
Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...
- (转)jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- Android 中文API (70) —— BluetoothDevice[蓝牙]
前言 本章内容是 android.bluetooth.BluetoothDevice,为Android蓝牙部分的章节翻译.蓝牙设备类,代表了蓝牙通讯国足中的远端设备.版本为 Android 2.3 ...
- Android 中文API (69) —— BluetoothAdapter[蓝牙]
前言 本章内容是 android.bluetooth.BluetoothAdapter,为Android蓝牙部分的章节翻译.本地蓝牙设备的适配类,所有的蓝牙操作都要通过该类完成.版本为 Androi ...
随机推荐
- LinkedList - java.util.ConcurrentModificationException
package com.test.io; import java.io.BufferedReader; import java.io.FileNotFoundException; import jav ...
- T-SQL 常用语句
1. 查看 Table 或者 Column 被那些object(存储过程.函数或View)调用. select a.* from sysobjects a, syscomments b where a ...
- UVA11542 Square(高斯消元 异或方程组)
建立方程组消元,结果为2 ^(自由变元的个数) - 1 采用高斯消元求矩阵的秩 方法一: #include<cstdio> #include<iostream> #includ ...
- HDU4495 Rectangle
求组成的等腰三角形面积最大值. 对此题的总结:暴力出奇迹 组成的三角形放置方式一共只有4种,用ans表示目前已知的最长三角形的边长,从上到下,从左到右枚举顶点,再枚举边长,一个重要剪枝是枚举边长l时先 ...
- shell test 數值 字符串 文件比較
數值比較 描述 n1 –eq n2 等於 n1 –gt n2 大於 n1 –ge n2 大於等於 n1 –lt n2 小於 n1 –le n2 小於等於 n1 –ne n2 不等於 字符串比較 ...
- x264中I,P,B帧和PTS,DTS的关系
转自:http://www.cppblog.com/tx7do/archive/2013/01/30/197633.html 基本概念: I frame :帧内编码帧 又称intra picture, ...
- 即时通讯(IM-instant messager)
即时通讯又叫实时通讯,简单来说就是两个及以上的人使用网络进行文字.文件.语音和视频的交流. 首先,进行网络进行通信,肯定需要网络协议,即时通讯专用的协议就是xmpp.xmpp协议要传递的消息类型是xm ...
- LoadRunner 一些快捷键
F4 Runtime Setting F5 运行 Ctrl Alt C 注释 Ctrl Alt U 取消注释 Tab 缩进 Shift Tab 取消缩进 Ctrl L 打开参数管理对 ...
- MOB 短信验证
工具/原料 Android Studio mob SDK中的jar 和.so文件 方法/步骤 1 把3个jar 放入libs 并添加依赖 在项目的build.gradle里面 在你的项 ...
- 【Android开发日记】Popupwindow 完美demo
Popupwindow 完美demo实现 图示: 关键代码说明: 1.弹出popupwindow,背景变暗 ColorDrawable cd = new ColorDrawable(0x000000) ...