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. metasploit.meterpreter学习笔记（博主推荐）

    Metasploit学习笔记(博主推荐) 继续上面的博客 metasploit.meterpreter的基本使用: 首先来获取当前系统(即xp)下的正在运行的一些进程 获得进程之后,我们通过migra ...

  2. 【DNN 系列】 模块开发 8.0.1

    1.创建第一个模块需要准备的东西有 https://github.com/dnnsoftware/DNN.Templates/releases/tag/1.0.1 VS 2015 插件 创建一个项目M ...

  3. AngularJs轻松入门（九）与服务器交互

    AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...

  4. Spring：dispatchservlet

    DispatcherServlet 是 Spring MVC 中负责请求调度的核心引擎,所有的请求将由此 Servlet 根据配置分发至各个逻辑处理单元.其内部同时也维护了一个ApplicationC ...

  5. bzoj1604 牛的邻居 STL

    Description 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”．每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi(l ...

  6. caioj 1087 动态规划入门（非常规DP11：潜水员）(二维背包)

    这道题的难点在于价值可以多. 这道题我一开始用的是前面的状态推现在的状态 实现比较麻烦,因为价值可以多,所以就设最大价值 为题目给的最大价值乘以10 #include<cstdio> #i ...

  7. PatentTips - Posting interrupts to virtual processors

    BACKGROUND Generally, the concept of virtualization in information processing systems allows multipl ...

  8. 常量成员函数的注意事项 & mutable的使用场景

    mutable的使用场景: 可以在一个const的对象里面,解除对部分字段的const限制.也可以用在const成员函数里面. 对于const与否,一般会调用不同版本的函数: 而对于二元操作符,如果用 ...

  9. [React] Pass a function to setState in React

    In React, when you want to set the state which calculation depends on the current state, using an ob ...

  10. HDU 1730 Northcott Game

    简单的尼姆博弈.想到了非常easy! 就拿一行举例.怎么赢.? 就是死劲挨着对方移,当然假设本身就是挨着的,又轮到你移动了,那么对于这一行来讲.你就是输的!! 由此可见每一行的棋子起始距离就显得尤为重 ...