• DataTables使用学习记录


    导入

    <link rel="stylesheet" type="text/css" href="DataTables-1.10.12/media/css/jquery.dataTables.css">

    <scripttype="text/javascript"charset="utf8"src="DataTables-1.10.12/media/js/jquery.js"></script>

    <scripttype="text/javascript"charset="utf8"src="DataTables-1.10.12/media/js/jquery.dataTables.js"></script>

    三个核心概念

    处理模式

    DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):

    • 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
    • 服务器端处理(ServerSide)—— 数据处理是在服务器上执行(页面只处理当前页的数据)【物理分页】。

    每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。

    服务器模式需要启用 serverSideOption 属性

    数据类型

    DataTables使用的数据源必须是一个数组,数组的每一项将显示在你定义的行上面,其使用三种基本的js数据作为数据源:分别是数组(Arrays[]),对象,(objects{})实例,(new myclass())默认的操作模式是数组,而对象和实例能处理更复杂的数据

    数组

    数组在DT中很容易使用,当使用数组作为数据源,每个数组元素的数量必须等于表中列数

    对象

    只需要使用一个属性的名字。比如data.name,而不是data[0]

    实例

    实例可以定义成抽象的方法来更新数据

    数据源

    DT支持三种数据源显示分别是DOM,JS,Ajax

    常用选项(Common options)

    下面列举了一些比较有用的选项:

    • ajax - 异步数据源配置
    • data - javascript数据源配置
    • serverSide - 开启服务器模式
    • columns.data - 配置每一列的数据源
    • scrollX - 水平滚动条
    • scrollY - 垂直滚动条

    Datatables拥有一个强大的API可以用来操作表格中的数据,他有下面六个关键部分:

    • 表格
    • 单元格
    • 核心方法
    • 工具类

    Datatables完整的方法列表,请参考API

    一个datatables实例可以通过下面三个方法实现:

    • $( selector ).DataTable();
    • $( selector ).dataTable().api();
    • new $.fn.dataTable.Api( selector );

    主要是要注意$( selector ).DataTable()与$( selector ).dataTable()两者之间的区别.前者返回一个datatable中API实例,而后者返回一个jQuery对象.一个api()方法添加到jQuery对象,这样你可以很轻松地访问API. 但是jQuery对象可以用于操纵表节点,与任何其他jQuery实例一样(像addClass()).

    实用方法链接http://datatables.club/blog/listall.html#不定时一讲

  • 相关阅读:
    hdu3336 Count the string 扩展KMP
    hdu3294 Girls' research manacher
    hdu3068 最长回文 manacher
    hdu2886 Lou 1 Zhuang 数学/快速幂
    hdu2841 Visible Trees 容斥原理
    hdu2819 Swap 二分图匹配
    RandomAccess接口的使用
    java集合框架
    java集合简介
    JDK,JRE,JVM的区别与联系
  • 原文地址:https://www.cnblogs.com/lgh344902118/p/6055071.html
Copyright © 2020-2023  润新知