js插件---datatables如何使用
2024-08-31 17:41:17
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>
最新文章
- php备份数据库
- springMVC 实现ajax跨域请求
- umbraco之DocumentType
- Javascript基础系列之(五)条件语句(比较操作符)
- 20160815_设置静态IP
- 《Code Complete》ch.14 组织直线型的代码
- 利用 NUget包 EPPlus 实现数据导出到Excel(适用于MVC)
- Axure自动幻灯片制作
- wamp启动mysql的命令
- 将 Servlet (HTTP POST/GET)请求发布到OSB
- CodeForces 606B Testing Robots
- SSM-MyBatis-14:Mybatis中智能标签
- Heroku 教程
- 1029 最大公约数和最小公倍数问题(gcd) luogu洛谷
- sshpass: 用于非交互的ssh 密码验证
- Java NIO-3
- Linq to Entity 动态拼接查询条件(重点是OR)
- ubuntu14下搭建svn
- php重写session的存储机制
- SQL server数据库压缩空间