鉴于自己一直在使用datatables,发现这是个很不错的表格插件,但是好的东西都是英文的,所以我结合自己的使用经验,把官网的英文api做下简单的翻译,同时也希望大家把自己的使用经验一起分享出来,让我们更好的使用datatables,本帖将会持续更新……
从基本属性开始吧
bAutoWidth :启用或禁用自动列宽度的计算。

默认值
true
类型
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bAutoWidth": false  //关闭后,表格将不会自动计算表格大小,在浏览器大化小化的时候会挤在一坨
  4. } );
  5. } );

复制代码

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

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

复制代码

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

默认值:
true
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bFilter": false
  4. } );
  5. } );

复制代码

bJQueryUI :这个不用多说了,一看就懂,启用jQuery UI样式,(需要在页面添加jQuery的样式文件)。

默认值:
false
类型:
boolean
  1. $(document).ready( function() {
  2. $('#example').dataTable( {
  3. "bJQueryUI": true
  4. } );
  5. } );

复制代码

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

默认值:
true
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bLengthChange": false,

复制代码

bPaginate :开启分页功能,如果不开启,将会全部显示

默认值:
true
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bPaginate": false
  4. } );
  5. } );

复制代码

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

默认值:
false
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bProcessing": true
  4. } );
  5. } );

复制代码

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

默认值:
false
类型:
boolean
  1. $(document).ready( function() {
  2. $('#example').dataTable( {
  3. "bScrollInfinite": true,
  4. "bScrollCollapse": true,
  5. "sScrollY": "200px"//长200像素
  6. } );
  7. } );

复制代码

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

默认值:
false
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bServerSide": true,
  4. "sAjaxSource": "xhr.php"
  5. } );
  6. } );

复制代码

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

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

复制代码

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

默认值:
true
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bSort": false
  4. } );
  5. } );

复制代码

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

默认值:
true
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bSortClasses": false
  4. } );
  5. } );

复制代码

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

默认值:
false
类型:
boolean
  1. $(document).ready( function () {
  2. $('#example').dataTable( {
  3. "bStateSave": true
  4. } );
  5. } );

复制代码

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

默认值:
blank string - i.e. disabled
类型:
string
  1. $(document).ready( function() {
  2. $('#example').dataTable( {
  3. "sScrollX": "100%",
  4. "bScrollCollapse": true
  5. } );
  6. } );

复制代码

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

默认值:
blank string - i.e. disabled
类型:
string
  1. $(document).ready( function() {
  2. $('#example').dataTable( {
  3. "sScrollY": "200px",
  4. "bPaginate": false
  5. } );
  6. } );

复制代码

本节完毕,推荐是用ctrl+f查找使用

转 Datatables中文API——基本参数的更多相关文章

  1. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  2. Datatables中文API——回调函数

    fnCookieCallback:还没有使用过 $(document).ready(function () { $('#example').dataTable({ "fnCookieCall ...

  3. JQuery Datatables Columns API 参数详细说明

    ---恢复内容开始--- Data Tables: http://datatables.NET/ Version: 1.10.0 Columns说明 虽然我们可以通过DOM直接获取DataTables ...

  4. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  5. [置顶] COcos2d-X 中文API

    本文来自http://blog.csdn.net/runaying ,引用必须注明出处! COcos2d-X 中文API 温馨提醒:使用二维码扫描软件,就可以在手机上访问我的博客啦!另外大家可以访问另 ...

  6. Android 中文 API (40) —— RatingBar

    Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...

  7. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. Android 中文API (70) —— BluetoothDevice[蓝牙]

    前言 本章内容是  android.bluetooth.BluetoothDevice,为Android蓝牙部分的章节翻译.蓝牙设备类,代表了蓝牙通讯国足中的远端设备.版本为 Android  2.3 ...

  9. Android 中文API (69) —— BluetoothAdapter[蓝牙]

    前言 本章内容是  android.bluetooth.BluetoothAdapter,为Android蓝牙部分的章节翻译.本地蓝牙设备的适配类,所有的蓝牙操作都要通过该类完成.版本为 Androi ...

随机推荐

  1. 【Agorithm】一次一密加密解密算法

    #include<iostream> #include<cstdio> #include<cstdlib> #include<ctime> #inclu ...

  2. ArcGIS中的三种查询

    ArcGIS runtime SDK for WPF/Silverlight中的三种常用的查询:QueryTask.FindTask.IdentifyTask都是继承自ESRI.ArcGIS.Clie ...

  3. 1-02 启动和停止Sql Sever的服务

    启动Sql  Sever服务的三种方式 1:后台启动服务. 2:Sql Sever配置管理员启动服务. 3:在运行窗口中使用命令启动和停止服务: 启动:net start mssqlsever. 停止 ...

  4. hdu 4293 2012成都赛区网络赛 dp ****

    题意:有n个人,可任意分成若干组,然后每个人个各提供一个信息,表示他们组前面有多少人,后面有多少人.问最多有多少个信息是不冲突的. 将n个人看成一组区间,然后每个人的信息可以表示为该人所在组的区间,然 ...

  5. FreeSWITCH 体系配置结构

    转自:http://www.cnblogs.com/logo-fox/archive/2013/12/09/3465440.html FreeSWITCH总体结构: FreeSWITCH 由一个稳定的 ...

  6. 数据分析(3):ufunc

    universal function 可以对数组里的每一个元素进行操作,底层是C语言实现的,在对数组运算时表现卓越 1.1 初步上手 x = np.linspace(0,2*np.pi,10) y = ...

  7. Mac OS 您需要安装旧 Java SE 6 运行环境才能打开“XXX” 问题

    问题描述: 今天在Mac OS上安装一个app的时候提示 “您需要安装旧 Java SE 6 运行环境才能打开 XXX” ,在网上搜索了一下,有说要改app的info.plist文件的,将其中的JVM ...

  8. 【JS】两种计时器/定时器

    1.首先介绍定时器 定时器:设置一个定时器,再设置一个等待的时间,到达指定时间后,执行对应的操作 两种定时器:用法一样,区别一个执行后不会停下来,一个只执行一次 第一种:window.setInter ...

  9. hdu 5306 优先队列

    用到优先队列 #include<iostream> #include<string> #include<algorithm> #include<cstdio& ...

  10. zoj 3469 Food Delivery 区间dp + 提前计算费用

    Time Limit: 2 Seconds      Memory Limit: 65536 KB When we are focusing on solving problems, we usual ...