`

使用 jQuery dataTables 四种数据来源

 
阅读更多

四种数据来源

对于 dataTables 来说，支持四种表格数据来源。

最为基本的就是来源于网页，网页被浏览器解析为 DOM 对象，在 dataTables 中称为  DOM 来源。

$(document).ready( function () {
     $( '#example' ).dataTable();
} );

第二种数据来源为数组， JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。

$(document).ready( function () {
     $( '#demo' ).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
     $( '#example' ).dataTable( {
         "aaData" : [
             /* Reduced data set */
             [ "Trident" , "Internet Explorer 4.0" , "Win 95+" , 4, "X" ],
             [ "Trident" , "Internet Explorer 5.0" , "Win 95+" , 5, "C" ],
             [ "Trident" , "Internet Explorer 5.5" , "Win 95+" , 5.5, "A" ],
             [ "Trident" , "Internet Explorer 6.0" , "Win 98+" , 6, "A" ],
             [ "Trident" , "Internet Explorer 7.0" , "Win XP SP2+" , 7, "A" ],
             [ "Gecko" , "Firefox 1.5" , "Win 98+ / OSX.2+" , 1.8, "A" ],
             [ "Gecko" , "Firefox 2" , "Win 98+ / OSX.2+" , 1.8, "A" ],
             [ "Gecko" , "Firefox 3" , "Win 2k+ / OSX.3+" , 1.9, "A" ],
             [ "Webkit" , "Safari 1.2" , "OSX.3" , 125.5, "A" ],
             [ "Webkit" , "Safari 1.3" , "OSX.3" , 312.8, "A" ],
             [ "Webkit" , "Safari 2.0" , "OSX.4+" , 419.3, "A" ],
             [ "Webkit" , "Safari 3.0" , "OSX.4+" , 522.1, "A" ]
         ],
         "aoColumns" : [
             { "sTitle" : "Engine" },
             { "sTitle" : "Browser" },
             { "sTitle" : "Platform" },
             { "sTitle" : "Version" , "sClass" : "center" },
             {
                 "sTitle" : "Grade" ,
                 "sClass" : "center" ,
                 "fnRender" : function (obj) {
                     var sReturn = obj.aData[ obj.iDataColumn ];
                     if ( sReturn == "A" ) {
                         sReturn = "<b>A</b>" ;
                     }
                     return sReturn;
                 }
             }
         ]
     } );   
} );

aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。

对于每一个列对象：

sTitle 定义列的标题

sClass 定义列的样式

fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。

错误的数组

第三种数据来源是 AJAX，也就是说可以向服务器发一个请求来获得数据。

在初始化参数对象中，通过 sAjaxSource 的属性传递请求的地址，bProcessing 表示是否需要显示一个工作中的提示。

在 JSON 方式返回的数据中，需要一个名为 aaData 的属性来提供实际的数据。

$(document).ready( function () {
     $( '#example' ).dataTable( {
         "bProcessing" : true ,
         "sAjaxSource" : '../examples_support/json_source.txt'
     } );
} );

其中 json_source.txt 就是 JSON 数据，其中定义了一个名为 aaData 的属性。这个文件可以在下载的压缩包中找到，在 examples\examples_support 文件夹中。

最后一种数据来源是服务器，对于大量的数据来说，你可能希望在服务器端完成所有的操作，分页、排序、过滤等等。dataTable 可以通过服务器完成这些功能，甚至其他的服务器，像  Google Gears 或者 Adobe Air，这样的话，dataTables 就是一个显示数据和提供操作事件的前端模块。

?
$(document).ready( function () {
     $( '#example' ).dataTable( {
         "bProcessing" : true ,
         "bServerSide" : true ,
         "sAjaxSource" : "../examples_support/server_processing.php"
     } );
} );

对于服务器来说，可以通过请求参数来获得当前的操作信息。

类型 名称 说明
int iDisplayStart 显示的起始索引
int iDisplayLength 显示的行数
int iColumns 显示的列数
string sSearch 全局搜索字段 
boolean bEscapeRegex 全局搜索是否正则
boolean bSortable_(int) 表示一列是否在客户端被标志位可排序
boolean bSearchable_(int) 表示一列是否在客户端被标志位可搜索
string sSearch_(int) 个别列的搜索
boolean bEscapeRegex_(int) 个别列是否使用正则搜索
int iSortingCols 排序的列数 
int iSortCol_(int) 被排序的列
string sSortDir_(int) 排序的方向 "desc" 或者 "asc".
string sEcho  DataTables 用来生成的信息

这篇文章介绍了在 C# 中结合 LINQ 使用 DataTables 进行服务端处理的经验 jQuery DataTables Plugin Meets C#

服务器应该返回如下的 JSON 格式数据

类型 名称 说明
int iTotalRecords 实际的行数
int iTotalDisplayRecords 过滤之后，实际的行数。
string sEcho 来自客户端 sEcho 的没有变化的复制品，
string sColumns 可选，以逗号分隔的列名，　　　　
array array mixed aaData 数组的数组，表格中的实际数据。　　　　

服务器返回的数据示例如下：

{
     "sEcho" : 3,
     "iTotalRecords" : 57,
     "iTotalDisplayRecords" : 57,
     "aaData" : [
         [
             "Gecko" ,
             "Firefox 1.0" ,
             "Win 98+ / OSX.2+" ,
             "1.7" ,
             "A"
         ],
         [
             "Gecko" ,
             "Firefox 1.5" ,
             "Win 98+ / OSX.2+" ,
             "1.8" ,
             "A"
         ],
         ...
     ]
}
分享到：
| oracle用delete命令删除数据恢复
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery DataTables示例，包含分页、拖拽、导出

    ajax: 'server_processing', // 数据来源，如果是服务器端，需指向处理请求的URL columns: [ // 定义列 {data: 'column1'}, {data: 'column2'}, ... ], dom: 'lfrtip', // 设置布局，例如'l'（长度控制）、'f...

    jquery dataTables组件

    3. **Ajax数据源**：使用DataTables的`ajax`选项设置数据来源，如下： ```javascript $('#example').DataTable({ ajax: 'server_script.php' }); ``` ### 三、Bootstrap整合 1. **样式兼容**：DataTables提供...

    jQuery表格插件DataTables

    如果是Ajax数据源，需要配置Ajax选项指定数据来源。 **3. 示例代码** ```html &lt;th&gt;Name &lt;th&gt;Position &lt;th&gt;Office &lt;th&gt;Age &lt;th&gt;Start date &lt;th&gt;Salary &lt;!-- 表格数据 --&gt; $(document).ready...

    jQuery表格插件datatables用法详解

    Datatables 支持四种数据来源： - DOM：直接从表格元素中获取数据 - Javascript array：使用 JavaScript 数组 - Ajax source：通过 AJAX 请求获取数据 - Server-side processing：服务器端处理数据，减少客户端...

    datatables_1.zip

    在这个"datatables_1.zip"压缩包中，我们有一个简单的jQuery DataTables应用实例，通过这个实例，我们可以深入学习和理解DataTables的使用方法。 首先，jQuery DataTables的核心功能包括数据的分页、排序、搜索和...

    jquery的DataTable

    可以使用`columns`选项自定义列的显示，包括数据来源、排序、搜索和渲染等。例如，自定义年龄列的排序方式： ```javascript $(document).ready(function() { $('#example').DataTable({ columns: [ // 其他列...

    datatables 示例

    - 可以通过`columns`配置项自定义列的显示和行为，如隐藏、宽度、数据来源等。 - `render`函数允许你自定义列的渲染逻辑，以满足复杂的数据展示需求。 **8. 扩展功能** - Datatables有许多插件，如Responsive、...

    datatables render与日期转换(moment.js)

    `data: 'date'` 指定了列数据来源，而内部的函数接收三个参数：`data` 是原始日期值，`type` 表示请求的渲染类型（如"sort"或"display"），`row` 是完整的行数据对象。通过`moment(data).format('DD/MM/YYYY HH:mm')...

    Jquery dataTable完整例子（取数据、分页、样式等）

    在描述中提到的JSON数据转换是常见的数据来源方式。你可以通过`ajax`选项指定一个URL，DataTable会自动向该URL发送请求获取数据。例如： ```javascript $('#example').DataTable({ ajax: 'data.json', columns:...

    JQuery.DataTable

    这需要设置`ajax`参数，指定数据来源URL，如： ```javascript $(document).ready(function() { $('#example').DataTable( { "ajax": "data.json" } ); } ); ``` 如果数据源是JSON格式，DataTables会自动解析并...

    jquery,d-a-t-a-T-a-b-l-e中文api.rar

    可以设置数据来源、可排序性、宽度等属性： ```javascript $('#example').DataTable({ columns: [ { data: 'name' }, { data: 'position', width: '20%' }, { data: 'office', searchable: false } ] }); ...

    基于dataTables组件的图书管理（前端简要设计）

    数据来源 - JSON文件** 数据通常以JSON（JavaScript Object Notation）格式存储，这是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在本项目中，`data.json`文件包含了所有图书的信息，...

    datatables怎么分页

    4. 处理服务器端数据：如果数据是从服务器获取的，需要设置 `processing: true` 和 `serverSide: true`，并定义 `ajax` 参数来指定数据来源和请求类型。 ```javascript $(document).ready(function() { $('#...

    Laravel开发-laravel-datatables .zip

    laravel-datatables是基于DataTables JavaScript库的Laravel包装器，DataTables是一个强大的jQuery插件，用于将HTML表格转化为功能丰富的交互式数据展示。它支持排序、过滤、分页和数据导出等功能。在Laravel项目中...

    jQuery客户端表格分页显示

    8. **插件使用**：jQuery有许多优秀的插件可以帮助实现客户端分页，如`datatables`、`bootstrap-paginator`等。这些插件提供了丰富的配置选项和自定义样式，可以快速实现专业级别的分页功能。 在提供的"Pagination...

    datatables 带查询条件java服务端分页处理实例

    2. 然后，我们需要在 JavaScript 文件中使用 jQuery 选择器选择该表格，并使用 DataTables 的插件将其转换为一个数据表格。 3. 在 DataTables 插件中，我们可以设置各种参数来控制表格的行为，例如设置分页控件的...

    table控件以及用法

    通常，表格的数据来源于服务器，可以通过Ajax异步加载。例如，使用jQuery的$.ajax方法： ```javascript $.ajax({ url: 'your-api-url', type: 'GET', dataType: 'json', success: function(data) { var table ...

    Chapter8(jquery).zip

    例如，用于图片懒加载的jQuery.lazyLoad，或者用于表格排序的jQuery.dataTables等。 八、性能优化与兼容性 理解jQuery的性能优化技巧是提升网页加载速度的关键。比如，避免频繁的DOM操作，利用缓存结果，以及使用 ...

    DataTablesAjax

    2. **Ajax数据源**：在DataTables中，可以使用`ajax`选项指定数据来源。这里通常会配置一个URL，这个URL指向服务器上的一个接口，该接口负责处理Ajax请求并返回JSON或XML格式的数据。 3. **服务器端处理**：在...

Magicbox
Global site tag (gtag.js) - Google Analytics