js插件---datatables如何使用
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
实现, 在不同浏览器上会有差异。如果需要更一致的排序,可以通过后端输出拼音进行排序。
实现步骤:
引入中文排序插件,或者把以下代码粘贴到初始化函数之前:
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);
}
});初始化的时候指定哪些栏目是中文字符(
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如何使用的更多相关文章
- jQuery 的插件 dataTables
---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...
- JQuery插件datatables相关api
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 表格插件datatables
具体用法查看官网 https://datatables.net/ {% load staticfiles %} <!DOCTYPE html> <html lang="en ...
- 表格排序插件datatables
之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- js插件---datatable常用配置
js插件---datatable常用配置 一.总结 一句话总结: datatable常用配置百度一下特别方便 二.jquery datatable 实例操作 转自或参考:jquery datatabl ...
- jquery表格插件Datatables使用、快速上手
Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
随机推荐
- C++字节对齐与结构体大小计算
转载注明出处:http://pppboy.blog.163.com/blog/static/30203796201082494026399/ 感谢原创博主的辛勤成果. 说明: 结构体的sizeof值, ...
- 基于AsyncTask的图片下载
有一阵子没有写程序,连基本的AsyncTask用法都记不清楚了,复习一下于是有了下面的图片加载类. package com.hitech.download; import java.io.IOExce ...
- NodeJS学习笔记 进阶 (10)Nodejs 进阶:log4js入门实例(ok))
个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...
- python 进阶:修饰器的介绍
参考链接:Python 函数装饰器 我认为python中的装饰器是一个很厉害的功能,他能瞬间提升代码的逼格,但对于我这样的小白来说,别说为所欲为的使用了,就连简单的尝试一下,却也是难于登天.经过长达半 ...
- CSU 1374 Restore Calculation 数位DP
题意: 给你三个数A, B, C(没有前导0),但是其中某些位不知道. 问A+B=C成立有多少种情况. 思路: 从最后一位往前推,枚举A, B的每一种情况,考虑进位和不进位两种情况. 代码: #inc ...
- Liquibase+spring 初步使用
现在的工作的项目中用了liquibase,感觉挺爽的,可以跟踪.管理数据库的重构.这对于很多需求变更较大的项目是非常不错的,特别是互联网的项目.(虽然互联网Nosql已经非常流行,不过俺觉得传统关系型 ...
- <Machine Learning in Action >之二 朴素贝叶斯 C#实现文章分类
def trainNB0(trainMatrix,trainCategory): numTrainDocs = len(trainMatrix) numWords = len(trainMatrix[ ...
- HDU 2444 The Accomodation of Students 二分图判定+最大匹配
题目来源:HDU 2444 The Accomodation of Students 题意:n个人能否够分成2组 每组的人不能相互认识 就是二分图判定 能够分成2组 每组选一个2个人认识能够去一个双人 ...
- 在VPS上用Outline Manager 建立*** 增强版服务器
在VPS上用Outline Manager 建立*** 增强版服务器 原文 https://free.com.tw/google-outline/ Outline 是Google Jigsaw的一款开 ...
- spring IOC --- 控制反转(依赖注入)----简单的实例
IoC(Inversion of Control)控制反转,对象创建责任的反转,在spring中BeanFacotory是IoC容器的核心接口,负责实例化,定位,配置应用程序中的对象及建立这些对象间的 ...