使用jQuery DataTables

最新推荐文章于 2021-09-30 20:37:48 发布

dingshi7798

最新推荐文章于 2021-09-30 20:37:48 发布

阅读量195

点赞数

文章标签： json javascript 前端 ViewUI

DataTables是一个功能强大的jQuery插件，用于创建表列表并向其中添加交互。它无需任何配置即可提供搜索，排序和分页。在本文中，我们将介绍DataTable的基础知识以及如何使用一些高级功能。

设置数据表

第一步是从DataTables网站获得该库。 1.9.4是当前的稳定版本，而1.10正在开发中。如果您不想下载文件，也可以使用Microsoft CDN 。由于它是一个jQuery插件，因此您也应该包括jQuery库，最好是最新版本。

命名约定

在继续之前，了解库中使用的约定很有用。 DataTables使用匈牙利表示法来命名变量，这基本上在名称中添加了某些前缀，有助于理解变量所保存的数据类型。

n –变量表示一个节点。
o –变量代表一个对象。
a –变量代表一个数组。
s –变量是一个字符串。
b –布尔值
f –浮动
i –变量保存一个整数值。
fn –变量表示一个函数。

有时，您会看到多个前缀一起使用，例如ao，它代表对象的数组。

入门

DataTables可以处理来自多种来源的数据。它可以直接在HTML表上工作，也可以在初始化时将数据指定为数组。或者它可以处理来自Ajax源的数据。

在本文中，我们将在SitePoint网络中创建网站列表。我们将从列出几个站点名称开始，然后添加更多列和功能。在这里，我们有一个HTML表，其中的一列仅列出了三个站点的名称。让我们看看DataTables可以通过最少的设置来完成的工作。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
  <table id="example">
    <thead>
      <tr><th>Sites</th></tr>
    </thead>
    <tbody>
      <tr><td>SitePoint</td></tr>
      <tr><td>Learnable</td></tr>
      <tr><td>Flippa</td></tr>
    </tbody>
  </table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
  $(function(){
    $("#example").dataTable();
  })
  </script>
</body>
</html>

将此代码复制并粘贴到html页面，然后在浏览器中将其打开。您将看到一个漂亮的表格，如下所示。

数据表

现在您知道了DataTable的功能以及我们可以完成的工作。通过这种最基本的设置，我们可以从顶部搜索框中搜索站点名称，然后通过单击列名称对其进行排序。如果您尝试自己实现这些功能，将有多困难？

在这里，我们首先在顶部包含DataTables CSS文件，在底部包含Js。 $("#example").dataTable()将使用id example实例化表上的DataTable。

现在，我们需要列出更多站点，并提供有关每个站点的更多详细信息。假设我们手中有一个列表，其中包含站点名称，URL，类型和最新更新等详细信息，但列表位于JavaScript数组而不是HTML表中。类型可以是博客，论坛或市场，对于不是博客的网站，最后更新的列的值为空。

在这里，我们要在最后更新的列中显示N / A而不是空值，并将URL设为可点击的链接。

我们将首先创建一个HTML表，其中包含所需的列标题和一个空表主体。

<table id="example">
  <thead>
    <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>

现在让我们将DataTables应用于此表。

$("#example").dataTable({
  "aaData":[
    ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
    ["Flippa","http://flippa.com","Marketplace","null"],
    ["99designs","http://99designs.com","Marketplace","null"],
    ["Learnable","http://learnable.com","Online courses","null"],
    ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
  ],
  "aoColumnDefs":[{
        "sTitle":"Site name"
      , "aTargets": [ "site_name" ]
  },{
        "aTargets": [ 1 ]
      , "bSortable": false
      , "mRender": function ( url, type, full )  {
          return  '<a href="'+url+'">' + url + '</a>';
      }
  },{
        "aTargets":[ 3 ]
      , "sType": "date"
      , "mRender": function(date, type, full) {
          return (full[2] == "Blog") 
                    ? new Date(date).toDateString()
                    : "N/A" ;
      }  
  }]
});

现在我们的表将如下所示。所有记录的URL列中都有一个可单击的链接，最后修改的列看起来很整洁。

数据表

我们已经使用DataTables的aaData选项提供了json数组。如果看一下代码，您将看到传递给DataTables的“ aoColumnDefs ”选项，该选项包含一些对象的数组。 aoColumnDefs属性基本上决定如何在表中呈现每一列。使用此属性，您可以修改表中由对象的aTargets属性指定的任意列。

aTargets数组中的值可以是在列标题中指定的类名称，列的索引（从0开始，从左到右，或者从负索引，从右到左），或“ _all ”以匹配表的所有列。第一列的“ sTitle ”：“ Site name ”将覆盖第一列的列标题。

请注意，第二列中缺少排序图标，因为基于URL的排序没有多大意义。我通过为相应的列设置bSortable:false来删除它。 mRender是一个功能强大的选项，可用于更改显示的数据。该属性可以通过多种方式给出。使用整数值时，它将使用该值作为数据数组的索引。给定字符串时，它将使用具有该名称的json对象的属性。

这些在我们显示从服务器返回的json数据时特别有用。 mRender也可以是一个函数，在呈现该列的每个单元格时将被调用。该函数将获得三个参数，值，类型和整行，并且它应返回我们要呈现的内容。我们的函数只是创建了指向该URL的链接并返回了该URL。

同样，对于最后更新的列，我们正在检查每行第三列中的值。如果它是Blog，则函数将返回格式化日期，否则它将返回“ N / A”。

“ sType ”属性可帮助我们指定该列的预期类型，该类型决定该列的值将如何排序。默认情况下，DataTables支持四种类型：字符串，数字，日期和HTML。您可以通过定义自定义类型来扩展它。在这里，我们将类型指定为“日期”，因此它将使用基于日期的排序。否则，它将列视为仅字符串，并且排序可能没有任何意义。

服务器端处理

在以上示例中，我们使用了直接在客户端提供的纯HTML表和json数组。有时数据库中的记录太多，因此一次获取所有记录并将DataTables应用到其中可能并不明智。相反，我们可以使用库提供的服务器端处理功能，并获取前端中当前显示的唯一记录。

每次渲染表时，DataTables都会向服务器发送一个带有多个参数的请求，包括起点，显示长度，搜索数据，排序列等。服务器可以在SQL查询中使用它们来过滤数据并发送他们返回给客户。 DataTables期望返回的json数据中包含一些属性，以便在前端正确显示它们。他们是：

iTotalRecords –应用过滤器之前，表中的总记录数。
iTotalDisplayRecords –应用过滤器后返回的记录数。
sEcho –客户端发送的sEcho的未更改副本。
aaData –来自服务器的数据数组。

来自服务器的json响应可能类似于：

{ 
    "iTotalRecords": 50,
    "iTotalDisplayRecords": 10,
    "sEcho":10,
    "aaData": [
        {"name": "Sitepoint", "url": "http://sitepoint.com", "editor" :{ "name" : "John Doe", "phone" : ["9191919", "1212121"], "email":[]}},
        {"name": "Flippa", "url": "http://flippa.com",  "editor": { "name": "Adam Smith", "email" : ["adam.smith@domain.com"], "phone":[] }}
    ]
}

为了呈现此效果，我们首先将创建一个具有相应列标题的html表。

$("#example").dataTable({
  "bServerSide": true,
  "sAjaxSource": "http://localhost/data_source.json",
  "aoColumns": [{
    "mData":"name",
    "sTitle": "Site name"
  },{
    "mData": "url",
    "mRender": function ( url, type, full )  {
      return  '<a href="'+url+'">' + url + '</a>';
    }
  },{
    "mData": "editor.name"
  },{
    "mData": "editor.phone"
  },{
    "mData":"editor",
    "mRender": function(data){
      return data.email.join("<br>");
    }
  }]
});

在这里，我们只是告诉DataTables通过将bServerSide设置为true从服务器加载数据。启用后，我们还应该使用sAjaxSource属性提供数据源。在从服务器返回的json数据中，默认情况下，DataTables将查找aaData以获取要在表中显示的数据。您可以通过在sAjaxDataProp属性中指定属性名称来覆盖此属性。

在这种情况下，我们得到一个json对象数组，因此我们应该映射哪个键应该显示在哪一列中。我们使用aoColumns代替aoColumnDefs 。两者都做相同的事情，但是方式不同。当使用aoColumns ，数组的长度应等于HTML表中的列数，以便为每列提供一个映射。

在json响应编辑器字段中是带有名称，电子邮件和电话字段的对象。 “ mData ”：“ editor.name ”告诉DataTables采用编辑器对象的name属性。请注意， phone和email是数组，它们将使用逗号自动连接，或者我们可以编写自定义mRender函数以使其看起来更好。

还有更多…

除了上述功能之外，DataTables还提供了许多非常有用的功能，我们可以使用或编写自己的插件来扩展它们。它还提供了一个简单的API，可以在创建表后对其进行操作。

var oTable =  $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
	var oData = oTable.fnGetData(this);
	console.log(oData);
})

当我们单击该代码时，它将连续记录值数据。 fnGetData基本上接受TR / TD节点或行的索引，并返回该行或单元格中的值。

有时，当我们从一页切换到另一页时，保存表的当前状态会很有用。您可以通过在初始化期间设置“ bStateSave ”： false来启用状态保存。默认情况下，状态将保存在Cookie中。 DataTables允许我们定义回调函数来覆盖它，以便我们可以将其存储在Localstorage或服务器本身中。这是一个将状态保存在Localstorage.a中的Localstorage.a

$("#example").dataTable({
      bStateSave : true,      
      fnStateSave :function(settings,data){
        localStorage.setItem("dataTables_state", JSON.stringify(data));
      },
      fnStateLoad: function(settings) {
        return JSON.parse(localStorage.getItem("dataTables_state"));
      }
    });

fnStateSave将在此处fnStateSave来保存状态。下次呈现表之前，它将调用fnStateLoad并加载先前存储的状态。 注意：在1.10版中，DataTables将使用localStorage作为默认存储来保存状态。

摘要

DataTables是一个高度灵活且功能丰富的库，用于处理表和列表。该库提供了许多配置选项和一个简单的API。不可能在一篇文章中讨论所有功能。因此，我们已经简要讨论了一些最有用的功能以及如何使用它们。

请尝试一下，如果您有任何问题，请告诉我。我会尽力帮助您。

使用SitePoint的高级订阅服务将jQuery技能提升到一个新的水平。 您会发现许多关于JavaScript和jQuery的书籍和课程-每个月都会增加！

From: https://www.sitepoint.com/working-jquery-datatables/

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery DataTables

数据表是用于创建表列表和添加交互，以他们强大的jQuery插件。它提供搜索，排序和分页无需任何配置。在这篇文章中我们将通过数据表，以及如何的基础知识，使用一些先进的功能。建立数据表第一步是获得从库中的数据表的网站。 1.9.4是当前的稳定版本1.10中发展到现在。如果你不想下载的文件，你也可以使用的微软CDN 。由于这是一个jQuery插件，你应该包括jQuery库也一样，最好是...
复制链接

扫一扫