js插件---datatables如何使用

一、总结

一句话总结：a、引入css和js（不要忘记css）；b、js代码启动插件（里面可以用参数控制各种功能）

1、dataTables如何显示控制行（比如显示多少条结果，搜索等）？

因为我没有引入插件对应的css，所以导致控制条没有出现

<link rel="stylesheet" href="../dist/amazeui.datatables.css">

所以启示就是一个插件一般都有js和css，如果插件使用出现问题，首先想到这个

2、dataTables的强大功能体现在哪里？

有搜索

有显示多少条数据

有自己分页

每列都有排序

有中文排序

3、dataTables如何实现中文排序支持（官方文档的具体使用）？

中文排序基于 localeCompare 实现， 在不同浏览器上会有差异。如果需要更一致的排序，可以通过后端输出拼音进行排序。

实现步骤：

  1. 引入中文排序插件，或者把以下代码粘贴到初始化函数之前：

    jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    
  "chinese-string-asc": function(s1, s2) {
    
    return s1.localeCompare(s2);
    
  },

  "chinese-string-desc": function(s1, s2) {
    
    return s2.localeCompare(s1);
    
  }
    
});

  2. 初始化的时候指定哪些栏目是中文字符（columnDefs 文档）：

    $('#sorting-chinese').dataTable({
    
  columnDefs: [
    
    {type: 'chinese-string', targets: '_all'}
    
  ]
    
});
具体实现：
 <script>

   jQuery.extend(jQuery.fn.dataTableExt.oSort, {

     "chinese-string-asc": function(s1, s2) {

       return s1.localeCompare(s2);

     },

     "chinese-string-desc": function(s1, s2) {

       return s2.localeCompare(s1);

     }

   });

   $(function() {

     $('#example').DataTable();

     $('#example-r').DataTable({

       responsive: true,

       dom: 'ti'

     });

     $('#sorting-chinese').dataTable({

       columnDefs: [

         {type: 'chinese-string', targets: '_all'}

       ]

     });

   });

 </script>
 

4、下载的js插件中存放插件用到的js和css的目录名叫什么？

dist

没在lib里面，在dist里面

二、js插件--datatables如何使用

1、截图

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <!-- amazeui的默认引入 -->

     <link rel="stylesheet" href="../../../css/amazeui.min.css">

     <script src="../../../js/jquery.min.js"></script>

     <script src="../../../js/amazeui.min.js"></script>

     <!-- 插件对应的js和css -->

     <script src="../dist/amazeui.datatables.js"></script>

     <link rel="stylesheet" href="../dist/amazeui.datatables.css">

 </head>

 <body>

 <table class="am-table am-table-striped am-table-bordered am-table-compact" id="example">

   <thead>

   <tr>

     <th>Rendering engine</th>

     <th>Browser</th>

     <th>Platform(s)</th>

     <th>Engine version</th>

     <th>Grade</th>

   </tr>

   </thead>

   <tbody>

   <tr class="odd gradeX">

     <td>Trident</td>

     <td>Internet

       Explorer 4.0</td>

     <td>Win 95+</td>

     <td class="center"> 4</td>

     <td class="center">X</td>

   </tr>

   <tr class="even gradeC">

     <td>Trident</td>

     <td>Internet

       Explorer 5.0</td>

     <td>Win 95+</td>

     <td class="center">5</td>

     <td class="center">C</td>

   </tr>

   </tr>

     <tr class="gradeX">

     <td>Misc</td>

     <td>Lynx</td>

     <td>Text only</td>

     <td class="center">-</td>

     <td class="center">X</td>

   </tr>

   <tr class="gradeC">

     <td>Misc</td>

     <td>IE Mobile</td>

     <td>Windows Mobile 6</td>

     <td class="center">-</td>

     <td class="center">C</td>

   </tr>

   <tr class="gradeA">

     <td>Misc</td>

     <td>NetFront 3.1</td>

     <td>Embedded devices</td>

     <td class="center">-</td>

     <td class="center">C</td>

   </tr>

   <tr class="gradeA">

     <td>Misc</td>

     <td>NetFront 3.4</td>

     <td>Embedded devices</td>

     <td class="center">-</td>

     <td class="center">A</td>

   </tr>

   <tr class="odd gradeX">

     <td>Trident</td>

     <td>Internet

       Explorer 4.0</td>

     <td>Win 95+</td>

     <td class="center"> 4</td>

     <td class="center">X</td>

   </tr>

   <tr class="even gradeC">

     <td>Trident</td>

     <td>Internet

       Explorer 5.0</td>

     <td>Win 95+</td>

     <td class="center">5</td>

     <td class="center">C</td>

   </tr>

   </tr>

     <tr class="gradeX">

     <td>Misc</td>

     <td>Lynx</td>

     <td>Text only</td>

     <td class="center">-</td>

     <td class="center">X</td>

   </tr>

   <tr class="gradeC">

     <td>Misc</td>

     <td>IE Mobile</td>

     <td>Windows Mobile 6</td>

     <td class="center">-</td>

     <td class="center">C</td>

   </tr>

   <tr class="gradeA">

     <td>Misc</td>

     <td>NetFront 3.1</td>

     <td>Embedded devices</td>

     <td class="center">-</td>

     <td class="center">C</td>

   </tr>

   <tr class="gradeA">

     <td>Misc</td>

     <td>NetFront 3.4</td>

     <td>Embedded devices</td>

     <td class="center">-</td>

     <td class="center">A</td>

   </tr>

   <!-- more data -->

   </tbody>

   <tfoot>

   <tr class="gradeU">

     <td>Other browsers</td>

     <td>All others</td>

     <td>-</td>

     <td class="center">-</td>

     <td class="center">U</td>

   </tr>

   <tr>

     <th>Rendering engine</th>

     <th>Browser</th>

     <th>Platform(s)</th>

     <th>Engine version</th>

     <th>Grade</th>

   </tfoot>

 </table>

 <script>

   jQuery.extend(jQuery.fn.dataTableExt.oSort, {

     "chinese-string-asc": function(s1, s2) {

       return s1.localeCompare(s2);

     },

     "chinese-string-desc": function(s1, s2) {

       return s2.localeCompare(s1);

     }

   });

   $(function() {

     $('#example').DataTable();

   });

 </script>

 </body>

 </html>
 

js插件---datatables如何使用的更多相关文章

  1. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...

  2. JQuery插件datatables相关api

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  3. 表格插件datatables

    具体用法查看官网 https://datatables.net/ {% load staticfiles %} <!DOCTYPE html> <html lang="en ...

  4. 表格排序插件datatables

    之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...

  5. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  6. js插件---datatable常用配置

    js插件---datatable常用配置 一.总结 一句话总结: datatable常用配置百度一下特别方便 二.jquery datatable 实例操作 转自或参考:jquery datatabl ...

  7. jquery表格插件Datatables使用、快速上手

    Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...

  8. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  9. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

随机推荐

  1. isInstanceOf，asInstanceOf，classOf[T]

    一.scala中把classOf[T]看成Java里的T.class, obj.isInstanceOf[T]看成 obj instanceof T, obj.asInstanceOf[T]看成(T) ...

  2. java9新特性-22-总结

    1.在java 9 中看不到什么? 1.1 一个标准化和轻量级的JSON API 一个标准化和轻量级的JSON API被许多java开发人员所青睐.但是由于资金问题无法在Java 9中见到,但并不会削 ...

  3. 把ISO文件当作光盘挂载

    当不能挂载光盘或者U盘时候,只需要把ISO文件传到某个目录中,比如/data下,即可挂载,如下所示:   mount -o loop /data/rhel-server-6.3-x86_64-dvd. ...

  4. Ubuntu18.06 Mate桌面环境下VirtuslBox打开虚拟机“全局菜单”异常退出解决办法

    在安装完Ubuntu18.06 Mate桌面环境后在VirtuslBox里打开虚拟机会出现“全局菜单”异常退出问题. 产生上面问题的原因是你的虚拟机可能在 显示= >屏幕= >硬件加速里勾 ...

  5. TP5使用路由模式报错 No input file specified.

    热烈推荐:超多IT资源,尽在798资源网 application/route.php 是设置路由的文件. 将 route.php 代码修改为 <?php use think\Route; Ro ...

  6. vue项目的环境变量

    关于项目中环境变量的总结 背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名.webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量 在工 ...

  7. yii2-Ueditor百度编辑器

    今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. 资源下载 yii2.0-ueditor下载路径: https://link.jiansh ...

  8. POJ 1035-Spell checker(字符串)

    题目地址:POJ 1035 题意:输入一部字典.输入若干单词. 若某个单词能在字典中找到,则输出corret.若某个单词能通过 变换 或 删除 或 加入一个字符后.在字典中找得到.则输出这些单词.输出 ...

  9. iPad popView封装

    仿照UITableView的UITableViewDataSource 协义 1.代理.让代理帮我们类完毕一些方法 2.完毕当前类不能完毕的事情还有传值等功能 实现方法 // 1. 声明一个协议 // ...

  10. C语言：具体解释指针

    指针应该算得上是c语言的精华,但也是难点. 非常多教程或者博客都有对其具体的解说与分析. 我这一节的内容,也是解说指针.但我会尽量使用图解的方式,使大家非常easy理解及掌握. 一.基本使用 先来看看 ...