DataTable 选项说明

DataTable 选项说明

code { font-family: sans-serif; font-size: 18px; color: chocolate }
span { font-family: sans-serif; font-size: 18px; color: darkslategrey }
.show { border-style: dashed; border-width: 1px; border-color: darkolivegreen; padding: 1px 1px; padding-left: 1px; padding-right: 1px }

DataTable 选项说明

  • 特性

    • jQueryUI:true/false:控制是否使用jqueryUI样式,需要引入jQueryUI的CSS
    • autoWidth:true/false:控制Datatables是否自适应宽度,建议宽度可以确定的时候尽量自行确定,自适应宽度会导致表格加载速度变慢
    • info:true/false:控制是否显示表格左下角的信息
    • lengthChange:true/false:是否允许用户改变表格每页显示的记录数
    • ordering:true/false:是否允许Datatables开启排序
    • paging:true/false:是否开启本地分页
    • processing:true/false:是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)
    • scrollX:数值:设置水平滚动
    • scrollY:数值:设置垂直滚动
    • scrollCollapse:true/false:是否开启垂直滚动条
    • serverSide:true/false:是否开启服务器模式
    • deferRender:true/false:d控制Datatables的延迟渲染,可以提高初始化的速度
  • 数据
    • ajax:异步数据:增加或修改通过Ajax提交到服务端的请求数据

      如果当做一个对象

    • data:本地数据:用来显示表格的数据

      data的数据可以是二维数组,也可以是对象数组

      • 二维数组

        $(‘#example‘).dataTable( {
                              "data": [
                                  [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
                                  [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],
                                  // ...
                              ]
                          } );
      • 对象数组

        $(‘#example‘).dataTable( {
                              "data": [
                                  {
                                      "name":       "Tiger Nixon",
                                      "position":   "System Architect",
                                      "salary":     "$3,120",
                                      "start_date": "2011/04/25",
                                      "office":     "Edinburgh",
                                      "extn":       5421
                                  },
                                  {
                                      "name": "Garrett Winters",
                                      "position": "Director",
                                      "salary": "5300",
                                      "start_date": "2011/07/25",
                                      "office": "Edinburgh",
                                      "extn": "8422"
                                  },
                                  // ...
                              ],
                              "columns": [
                                  { "data": "name" },
                                  { "data": "position" },
                                  { "data": "office" },
                                  { "data": "extn" },
                                  { "data": "start_date" },
                                  { "data": "salary" }
                              ]
                          } );

原文地址:https://www.cnblogs.com/rangger/p/9349884.html

时间: 2024-08-03 04:55:24

DataTable 选项说明的相关文章

二十五、【开源】EFW框架Winform前端开发之强大的自定义控件库

回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa       前言:相比以前现在做Net系统Winform版开发有几款不错的控件,如DotNetBar.DevExpress,EFW框架也不能落后加入了DotNetBar控件,有时间也想把DevExpress控件也整合进来,这样让大家又多一个选择:DotNetBar中

【SAS BASE】IMPORT过程(适用于CSV文件及其他分隔符文件)

1.PROC IMPROT的特点 默认情况下,PROC IMPORT扫描数据文件的前20行,并据此为变量分配变量类型(数值型or字符型): 自动为字符型变量分配长度,为数值型变量分配格式为BEST32(自己总结,不一定对): 将连续的两个分隔符看作是缺失值: 读入某一行数据时,若该行数据不足以分配给变量,则分配后面的变量为缺失值: 2.PROC IMPORT的一般形式为: 1 PROC IMPROT DATAFILE='filename' OUT=data-set; DBMS Identifie

JSON之Asp.net MVC C#对象转JSON,DataTable转JSON,List&lt;T&gt;转JSON,JSON转List&lt;T&gt;,JSON转C#对象

一.JSON解析与字符串化                                                                                            JSON.stringify() 序列化对象.数组或原始值 语法:JSON.stringify(o,filter,indent) o,要转换成JSON的对象.数组或原始值 filter,指定要序列化的属性名 indent,格式化为可读的代码,可指定分隔符或指定的缩进空格个数 var man

jquery datatable 参数api

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明. 首先,需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库, 然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用. 引入CSS文件和JS文件 -------------

datatable 使用详细说明

要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理.以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAutoWidth true or false, default true 是否自动计算表格各列宽度 bDeferRender true or false, default false 用于渲染的一个参数 bFilter true or false, default t

深入解析DataTable如何过滤

此DataTable指的是SpryMedia专为HTML Table设计和开发的页面插件,官方站点是:http://legacy.datatables.net/index. 关于oSettings.aiDisplayMaster, oSettings.aiDisplay与oSettings.aoData 无论是从JSON中获取的行数据,还是从DOM元素中获取的行数据,在表初始化之后,皆存储在oSettings.aoData中.有多少条记录aoData数组就有多长. 而aiDisplayMaste

php+bootstrap+dataTable+jquery分页列表

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script&g

jQuery Datatable(V1.10.7) server side processing

Datatable是jQuery一个强大的插件,详见https://www.datatables.net/,下面本人略总结在CodeIghiter框架的前端使用datatable的方法. 常用的配置选项: 根据数据源.性能要求可以配置各种配置项,下面列举几个常用的选项: •aaData: js array数据源数组,格式可以是二维数组 [ [a,b,c],[d,e,f] ] 或json串数组(支持深度嵌套),后者需结合列定义的mData选项,指定目标数据: •bDeferRender:延迟渲染模

datatable使用手册

官方地址 https://datatables.net/examples/index 1. 需要引用<script src="js/jquery.dataTables.js"></script>.如果用到css 也需要引用css 2.页面内容 <table id="example" class="table table-striped table-bordered"> <thead> <tr&