DataTables四种数据源

最新推荐文章于 2023-03-06 22:30:00 发布
最新推荐文章于 2023-03-06 22:30:00 发布
阅读量2.2k 收藏 3
点赞数 1
分类专栏： DataTables jQuery 文章标签： DataTables 获取数据源
本文详细介绍DataTables插件的使用方法，包括HTML数据源、Ajax数据源、JavaScript数据源及服务器端数据源等不同数据源的应用场景及配置方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　DataTables是一款非常简单的前端表格展示插件，它支持排序，翻页，搜索以及在客户端和服务端分页等多种功能。官方介绍：

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

它的数据源有很多种：主要有HTML (DOM)数据源，Ajax数据源，JavaScript数据源以及服务器端数据源。这里分别介绍一下这四种数据源的使用。

　　首先需要在你的html代码引入以下的js和css文件：jquery-1.11.1.min.js、jquery.dataTables.min.js以及jquery.dataTables.css。

文章目录

一、HTML (DOM) sourced data

　　HTML表格数据如下：

< table id = "example" class = "display" cellspacing = "0" width = "100%" >
         < thead >
             < tr >
                 < th >Name</ th >
                 < th >Position</ th >
                 < th >Office</ th >
                 < th >Age</ th >
                 < th >Start date</ th >
                 < th >Salary</ th >
             </ tr >
         </ thead >
 
         < tbody >
             < tr >
                 < td >Tiger Nixon</ td >
                 < td >System Architect</ td >
                 < td >Edinburgh</ td >
                 < td >61</ td >
                 < td >2011/04/25</ td >
                 < td >$320,800</ td >
             </ tr >
             < tr >
                 < td >Garrett Winters</ td >
                 < td >Accountant</ td >
                 < td >Tokyo</ td >
                 < td >63</ td >
                 < td >2011/07/25</ td >
                 < td >$170,750</ td >
             </ tr >
    </ tbody >
</ table >

然后加入JavaScript代码：

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

Show 102550100 entries
Search:
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Jena GainesOffice ManagerLondon302008/12/19$90,560
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Showing 1 to 10 of 11 entries
1 2

二、Ajax sourced data

　　Datatable可以解析来自Ajax的Json数据：
HTML代码如下：

< table id = "example1" class = "display" cellspacing = "0" width = "100%" >
         < thead >
             < tr >
                 < th >Name</ th >
                 < th >Position</ th >
                 < th >Office</ th >
                 < th >Extn.</ th >
                 < th >Start date</ th >
                 < th >Salary</ th >
             </ tr >
         </ thead >
  
         < tfoot >
             < tr >
                 < th >Name</ th >
                 < th >Position</ th >
                 < th >Office</ th >
                 < th >Extn.</ th >
                 < th >Start date</ th >
                 < th >Salary</ th >
             </ tr >
         </ tfoot >
</ table >

JavaScript代码：

$(document).ready( function () {
     $( '#example1' ).dataTable( {
         "ajax" : '/wp-content/themes/yusi2.0/dataTable/arrays.txt'
     } );
} );
Show 102550100 entries
Search:
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Airi SatouAccountantTokyo54072008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco15622009/01/12$86,000
Brielle WilliamsonIntegration SpecialistNew York48042012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh62242012/03/29$433,060
Colleen HurstJavascript DeveloperSan Francisco23602009/09/15$205,500
Garrett WintersAccountantTokyo84222011/07/25$170,750
Herrod ChandlerSales AssistantSan Francisco96082012/08/06$137,500
Jena GainesOffice ManagerLondon38142008/12/19$90,560
Rhona DavidsonIntegration SpecialistTokyo62002010/10/14$327,900
Sonya FrostSoftware EngineerEdinburgh16672008/12/13$103,600
Showing 1 to 10 of 11 entries
1 2

三、Javascript sourced data

　　在很多时候，我们的数据都是动态生成的，dataTable支持读取和解析JavaScript 中的数组。我们只需要将 JavaScript 数组传递给dataTable的data属性即可。
JavaScript代码：

<table cellpadding= "0" cellspacing= "0" border= "0" class= "display" id= "example2" ></table>
var dataSet = [
     [ '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' , 'Win 98+' , '6' , 'A' ],
     [ 'Trident' , 'Internet Explorer 7' , 'Win XP SP2+' , '7' , 'A' ],
     [ 'Trident' , 'AOL browser (AOL desktop)' , 'Win XP' , '6' , 'A' ],
     [ 'Gecko' , 'Firefox 1.0' , 'Win 98+ / OSX.2+' , '1.7' , 'A' ],
     [ 'Gecko' , 'Firefox 1.5' , 'Win 98+ / OSX.2+' , '1.8' , 'A' ],
     [ 'Gecko' , 'Firefox 2.0' , 'Win 98+ / OSX.2+' , '1.8' , 'A' ],
     [ 'Gecko' , 'Firefox 3.0' , 'Win 2k+ / OSX.3+' , '1.9' , 'A' ],
     [ 'Gecko' , 'Camino 1.0' , 'OSX.2+' , '1.8' , 'A' ],
];
 
$(document).ready( function () {
     $( '#example2' ).dataTable( {
         "data" : dataSet,
         "columns" : [
             { "title" : "Engine" },
             { "title" : "Browser" },
             { "title" : "Platform" },
             { "title" : "Version" , "class" : "center" },
             { "title" : "Grade" , "class" : "center" }
         ]
     } );  
} );
Show 102550100 entries
Search:
EngineBrowserPlatformVersionGrade
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
TridentInternet Explorer 4.0Win 95+4X
TridentInternet Explorer 5.0Win 95+5C
TridentInternet Explorer 5.5Win 95+5.5A
TridentInternet Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
TridentAOL browser (AOL desktop)Win XP6A
Showing 1 to 7 of 7 entries
1

四、Server-side processing

　　这种是最常见的数据来源，我们在服务器端生成需要的数据（一般都是Json格式的），然后返回给前端。而且这种情况我们可以利用dataTable的服务器端翻页。JavaScript代码：如下：
HTML代码如下：

< table id = "example" class = "display" cellspacing = "0" width = "100%" >
         < thead >
             < tr >
                 < th >Name</ th >
                 < th >Position</ th >
                 < th >Office</ th >
                 < th >Extn.</ th >
                 < th >Start date</ th >
                 < th >Salary</ th >
             </ tr >
         </ thead >
  
         < tfoot >
             < tr >
                 < th >Name</ th >
                 < th >Position</ th >
                 < th >Office</ th >
                 < th >Extn.</ th >
                 < th >Start date</ th >
                 < th >Salary</ th >
             </ tr >
         </ tfoot >
     </ table >

$(document).ready( function () {
     $( '#example' ).dataTable( {
         "processing" : true ,
         "serverSide" : true ,
         "ajax" : "../processing.php"
     } );
} );

转自：https://www.iteblog.com/archives/1257.html

Datatables插件-四种数据来源
野生码农
10-25 555
Datatables功能强大，支持分页，支持行数限制。 支持前端做二次搜索，前端接收所有数据，再输入关键词，可以过滤很多无用行。 填充数据即可使用，免去了图形绘制等琐碎劳动。 Datatables使用较为简单，支持数组，前端ajax接收到返回的消息之后，将json数组转化成数组，然后提供给这个组件，接着指定列名。 重点：下面的资料描述不清楚。仅供参考。前缀aaData，aoColumns，...
Datatables使用Ajax方式读取数据
01-11
这里，`#example`是表格的ID，`processing`和`serverSide`选项表示Datatables将处理数据加载和分页，而`ajax`参数指定了数据源。 2. **Ajax数据源**：在示例中，数据源是"data.txt"。通常，这会是一个服务器端的...
手写代码给DataTable赋值，绑定数据源
06-30
解决了不能为DabaTable定向赋值的难题
DataTable数据源的创建
VS2008+LINQ+JAVASCRIPT
08-01 1543
 一、首先创建列DataTable dt=new DataTable();dt.Columns.Add("列名1",typeof(string));dt.Columns.Add("列名2",typeof(string));dt.Columns.Add("列名3",typeof(string));二、构建行DataRow dr = dt.NewRow();dr[0] =
用DataTable显示数据源（自己根据需要构造出来的）
xiongxyt2的专栏
07-14 6114
DataTable dt = new DataTable();                int i;                dt.Columns.Add("设备编号");                dt.Columns.Add("Command类型");
php datatables,DataTables四种数据源
weixin_31163527的博客
03-12 408
DataTables是一款非常简单的前端表格展示插件，它支持排序，翻页，搜索以及在客户端和服务端分页等多种功能。官方介绍：DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancem...
datatables表格插件数据源json的格式
06-10
DataTables表格插件的数据源JSON格式如下： ``` { "data": [ [ "1", "John", "Doe", "john@example.com" ], [ "2", "Jane", "Doe", "jane@example.com" ], [ "3", "Bob", "Smith", "bob@example....
DataTables表格插件的数据源 怎么给
06-10
可以使用DataTables提供的ajax选项来指定数据源的URL，例如： ```javascript ...除了上述两种方式，还可以使用DataTables提供的其他选项和API来动态地更新数据源，具体使用方式可以参考DataTables的官方文档。
DataTables2.1.8版本
最新发布
11-09
它支持多种数据源，包括HTML表格、JavaScript数组、Ajax数据源以及服务器端处理，从而允许开发者根据项目需求选择最适合的方式。此外，DataTables还拥有易于定制的主题和丰富的配置选项，使得开发者可以轻松地调整...
DataTablesSrc:DataTables源存储库
04-28
jQuery的DataTables插件-源代码库 该git存储库包含DataTables的未构建源文件-DataTables增强了jQuery的插件。 如果您要使用DataTables而不是对其进行修改，请使用构建版本库中的构建文件： 。 在其中有关于如何使用...
DataTable 数据源加载之后列表加载之前重新处理数据.pdf
08-21
private DataTable Optimization_DataTable(DataView dv) { DataTable dt = dv.Table.Clone(); if (dv.Table.Rows.Count >= 1) { for (int i = 0; i < dv.Table.Rows.Count; i++) { DataRow dr_1 = dt.NewRow(); string[] str_To_end_customer = dv.Table.Rows[i]["To_end_customer"].ToString().Split(','); string[] str_HK10_FR10 = dv.Table.Rows[i]["hk_invoice"].ToString().Split(','); dr_1["status"] = dv.Table.Rows[i]["status"]; dr_1["country"] = dv.Table.Rows[i]["country"]; //dr_1["qty"] = dv.Table.Rows[i]["qty"];
Datatables Ajax源数据
夜飞鼠的专栏
03-06 944
一个简单的jQuery单击事件侦听器用于监视行上的单击，激活时使用row（）.data（）方法获取行的数据，并在警告框中显示有关该行的一些信息。这可以通过使用columns.data选项来完成，使用该选项告诉DataTables要从数据源对象中为每个列使用哪个属性。本节中的示例演示了Ajax在DataTables中加载数据以及客户端处理的使用。在本例中，Ajax源返回一个对象数组，DataTables使用该数组显示表。在本例中，Ajax源返回一个对象数组，DataTables使用该数组显示表。
datatables 自定义数据源
qq_32890155的博客
03-11 258
var dataSet = [     ['Trident','Internet Explorer 4.0','Win 95+','4','X'],     ['Trident','Internet Explorer 5.0','Win 95+','5','C'],     ['Trident','Internet Explorer 5.5','Win
datatables——数据
zhuyunhe的专栏
10-20 2789
官网：http://www.datatables.net/ 中文网：http://dt.thxopen.com/   在datatables中，处理数据要掌握以下三个核心概念： 1.处理模式 datatables有两种不同的方式处理数据（排序、搜索等）： 第一种：客户端处理。所有的数据集预先加载和数据处理都是在浏览器中完成。 第二种：数据处理在服务器上执行。
jquery.datatable例子 数据源(数组)
fish88168的专栏
03-01 2731
pageEncoding="UTF-8"%> http://www.w3.org/TR/html4/loose.dtd"> Insert title here         @import "./css/demo_page.css";       @import "./css/demo_table.css";   var aDataSet = [
datatbales的数据源类型(Data source types)
weixin_33743661的博客
04-19 174
数据是复杂的,并且所有的数据是不一样的。因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据。 本节将讨论 DataTables 处理数据的三个核心概念： 处理模式 数据类型 数据源 处理模式(Processing modes) DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):...
datatables 自定义数据源
weixin_34292402的博客
03-11 299
functionanalysis_table1(){ vardataSet=[ ['1','大气所','PM2.5','区域监点'], ['1','大气所','PM2.5','区域监点'], ['1','大气所','PM2.5','区域监点'], ['1','大气所','PM2.5','区域监点'...
DataTables
imcora的专栏
07-30 1115
Chapter 4 DataTables 在QTP中，DataTable所扮演的角色主要为数据驱动。它和MS Excel的数据表非常相似。通过DataTable，可以控制每个Action运行的次数。DataTable分为全局表（Global）和局部表（Local）两种。全局表用来控制所有的Action，而每个Action则拥有其名下的局部表。有一点让人很容易产生混淆，不同的Action之间可以互
datatables 使用
高山流水的博客
09-25 4922
datatables 使用 一、简介 官网：https://datatables.net/ 中文官网：http://datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值