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. Android 自定义viewpager 三张图片在同一屏幕轮播的效果

    github:https://github.com/nickeyCode/RoundImageViewPager 说实话不知道怎么描述这个效果,在网页上见得跟多,公司要求做这个效果得时候不知道怎么用文 ...

  2. Android框架-Volley(四)

    经过前三篇文章的学习,Volley的用法我们已经掌握的差不多了,但是对于Volley的工作原理,恐怕有很多朋友还不是很清楚.因此,本篇文章中我们就来一起阅读一下Volley的源码,将它的工作流程整体地 ...

  3. Bayes++ Library入门学习之熟悉namespace

    Bayes++是一个开源的C++类库.这些类表示并实现了用于离散系统的贝叶斯滤波的各种数值算法.该库中的类提供测试和一致的数值方法,并且用层次明确的结构表明了各种滤波算法和系统模型类型. 接下来,我们 ...

  4. javascript上下文this

    js的四种调用方式: 一 作为函数的调用: 在严格模式下this,undefined,在非严格模式下指向全局window对象. 二 作为方法调用: this通常指向调用的对象 三 作为构造函数的调用: ...

  5. 通过浏览器地址进行 post get 请求

    首先安装curl 1.post chcp 65001 title 接口测试脚本 d: cd D:\curl\ curl -l -X POST -d "params" url ech ...

  6. CSS动画框架Loaders.css +animate.css

    CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...

  7. vue+element-ui的简洁导入导出功能

    1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;原生js导出excel2.导入是利用element-ui的Upload 上传组件; <el-upload class=&qu ...

  8. Python解析Socket数据流异常bytes问题

    Python解析Socket数据流异常bytes问题 -- 2019-03-12 python在通过socket发送数据时,英文字符转义后为原来本身的字符,占一个字节(如:s转移后为s),而中文字符在 ...

  9. C# http服务器

    Http 服务器搭建 1.新建一个C#控制台工程 2.复制以下代码 using System; using System.Collections.Generic; using System.Linq; ...

  10. 【Henu ACM Round#20 F】 Arthur and Brackets

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 所给的li,ri是左括号从左到右的顺序给的. (且注意长度是2*n 现在我们先把第一个左括号放在第1个位置. 然后考虑第二个位置. ...