转 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 ...
随机推荐
- <转> jsp:include 乱码问题解决
jsp include页面出现乱码问题的几种通用解决方法: 1.当jsp include动态文件时(jsp文件)可以在被include的jsp文件头部加上代码: <%@ page languag ...
- 使用zookeeper实现分布式锁
简介: 核心是解决资源竞争的问题 分布式系统中经常需要协调多进程或者多台机器之间的同步问题,得益于zookeeper,实现了一个分布式的共享锁,方便在多台服务器之间竞争资源时,来协调各系统之间的协作和 ...
- 杂物 git rebase
- 【转】GeoHash核心原理解析
好久没更新过博客了,先转载一篇文章吧. 源地址:http://www.cnblogs.com/LBSer/p/3310455.html 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按 ...
- 基于MATLAB的adaboost级联形式的人脸检测实现
很早之前就做过一些关于人脸检测和目标检测的课题,一直都没有好好总结出来,趁着这个机会,写个总结,希望所写的内容能给研究同类问题的博友一些见解和启发!!博客里面涉及的公式太繁琐了,直接截图了. 转载请注 ...
- Arduino101学习笔记(九)—— 中断函数
1.设置中断函数 //***************************************************************************************** ...
- 已解决:Strict Standards: Non-static method cls_image::gd_version() should not be called statically in...
在安装Ecshop的时候,遇到两个⚠️问题: Strict Standards: Non-static method cls_image::gd_version() should not be cal ...
- error: bad symbolic reference. A signature in HiveContext.class refers to term hive
在spark-shell中执行val sqlContext = new org.apache.spark.sql.hive.HiveContext(sc)报错: error: bad symbolic ...
- kylin的安装与配置
我的环境: Cloudera Hadoop5.3.6 其中, Hadoop版本2.5.0 Hbase版本0.98.6 Hive版本0.13.1 使用的kylin版本:1.5.2.1 下载地址: htt ...
- python 继承
继承一个类 如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object): def __init__(self ...