本文介绍: jQuery DataTables一个功能丰富且灵活的 jQuery 插件用于创建交互式数据表格,提供搜索排序分页筛选功能以便更好展示管理数据通过使用 jQuery DataTables,你可以轻松地将数据转换为易于浏览和交互表格,而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项扩展,使你能够适应不同的数据源显示需求

jquerydataTables

介绍

jQuery DataTables一个功能丰富且灵活的 jQuery 插件,用于创建交互式数据表格,提供搜索排序、分页、筛选功能以便更好展示和管理数据。
通过使用 jQuery DataTables,你可以轻松地将数据集转换为易于浏览和交互表格,而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展,使你能够适应不同的数据源显示需求
以下是一些 jQuery DataTables 的主要特点:
数据处理可以从多种数据源(如 JSON、AJAX、HTML 表格等)获取数据展示
分页: 支持自动分页,将大量数据拆分成易于浏览的页面
排序: 可以对各列进行升序或降序排序,帮助用户快速找到所需信息
搜索: 提供内置搜索功能,允许用户通过关键字搜索数据。
筛选: 允许用户根据列值进行筛选,以缩小显示范围
分组: 可以将数据分组显示,方便查看相关数据。
自定义: 提供多种配置选项和扩展,允许你根据需求自定义表格的样式行为
插件: 有许多官方第三方扩展,可以为表格添加额外的功能
使用 jQuery DataTables,你需要在你的项目引入 jQuery 库和 DataTables 插件的相关文件然后在 HTML 中创建一个表格,并通过 JavaScript 初始化 DataTables。
官方网站https://datatables.net/。
官方源码地址https://github.com/DataTables
一般会去官方地址根据需求下载,如果简单本地使用的话直接引用就行
下载地址https://datatables.net/download/
可以根据选择自由下载
在这里插入图片描述

入门使用

分三步:
1、新建一个html文件head引入依赖

  <script src="js/jquery.dataTables.js"&gt;</script>
  <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>

2、新建一个表格

<table id="myTable" class="display">
  <thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Row 1 Data 1</td>
    <td>Row 1 Data 2</td>
  </tr>
  <tr>
    <td>Row 2 Data 1</td>
    <td>Row 2 Data 2</td>
  </tr>
  </tbody>
</table>

效果如下

3、用jquerydataTbales美化

  $(document).ready( function () {
    $('#myTable').DataTable();
  } );

在这里插入图片描述

此时效果
在这里插入图片描述

可以清楚的看到能够快速我们的表格数据进行了美化,不用再重复css和js代码了。

通过获得数据源来生成表格

我们可以根据数据直接生成表格数据
在DataTable中定义三种数据源
数组 -[]
对象 -{}
实例new MyClass()
接下来将会展示三种数据源直接生成表格的形式,在这之前需要简化一下html元素

<table id="myTable" class="display">
  <thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
  </tr>
  </thead>
  </tbody>
</table>

直接删掉数据,定义标题就可以,这意味着这个元素可以定义六列,当然还有更简便的方法接下来会提到
利用dataTables填充数据
1、数组

  var data = [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$3,120"
    ],
    [
      "Garrett Winters",
      "Director",
      "Edinburgh",
      "8422",
      "2011/07/25",
      "$5,300"
    ]
  ]
  $('#myTable').DataTable( {
    data: data
  } );

此时表格展示如下

2、对象
对象非常适合直观使用,其方式与数组略有不同。如果您通过API主动处理数据,则对象可以使获取特定数据变得非常容易,因为您只需要使用属性名称,而不需要记住该数据所在的数组索引
对象还可以包含数据表显示所需的更多信息,这对于数据操作非常有用(例如,包括最终用户不可见的数据库主键)。
这里,上面的html头部也不需要定义了,只需要一个table的id即可,因为我们会在数据中定义要展示的数据,(虽然可以删除,但是这块的头部也会丢失这里主要关注数据的展示,但这是需要注意的)

<table id="myTable" class="display">

</table>

定义好要展示的数据

  var 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":     "$5,300",
      "start_date": "2011/07/25",
      "office":     "Edinburgh",
      "extn":       "8422"
    }
  ]

选择要展示的数据和类属性

  $('#myTable').DataTable( {
    data: data,
    columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'salary' },
      { data: 'office' }
    ]
  } );

这里上面的数据有6列,但是我么可以通过定义columns的方式仅仅展示其中4列
在这里插入图片描述

3、实例
让 DataTables 显示来自 Javascript 对象实例,首先需要定义一个实例对象

function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
 
    this.office = function () {
        return this._office;
    }
};
 

直接展示即可

$('#myTable').DataTable( {
    data: [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
} );

这里仅仅介绍基本的数据源展示,还有对于表格的数据渲染复杂数据的展示详见官方文档

原文地址:https://blog.csdn.net/Artisan_w/article/details/133806845

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16659.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注