metronic 表格插件 datatables
官方网站:https://datatables.net/
css引入:datatables.min.css && datatables.bootstrap.css && bootstrap-datepicker3.min.css
j s 引入:datatable.js && datatables.min.js && datatables.bootstrap.js
html代码:
<table class="table table-striped table-bordered table-hover table-checkable order-column" id="datatable_orders"></table>
初始化:
var initTable1 = function () {
var table = $('#datatable_orders');//table ID
var oTable = table.dataTable({
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
buttons: [
// { extend: 'print', className: 'btn dark btn-outline' },
// { extend: 'copy', className: 'btn red btn-outline' },
// { extend: 'pdf', className: 'btn green btn-outline' },
// { extend: 'excel', className: 'btn yellow btn-outline ' },
// { extend: 'csv', className: 'btn purple btn-outline ' },
// { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
],
// setup responsive extension: http://datatables.net/extensions/responsive/
responsive: true,
paging: false, //分页
searching: false, //搜索
ordering: true, //排序
"order": [
[, 'asc']
],
"lengthMenu": [
[, , , , -],
[, , , , "All"] // change per page values here
],
"pageLength": ,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
});
}
initTable1();
metronic 表格插件 datatables的更多相关文章
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- JQuery表格插件DataTables 当前页合计功能
公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...
- 一款比较强大的jquery表格插件Datatables
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...
- jquery表格插件Datatables使用、快速上手
Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...
- jquery 强大表格插件 DataTables
官网:https://datatables.net/ 配置:https://datatables.net/reference/option/ API :https://datatables.net/r ...
- 表格插件datatables
具体用法查看官网 https://datatables.net/ {% load staticfiles %} <!DOCTYPE html> <html lang="en ...
- 前端表格插件datatables
下载datatables datatables官网:https://www.datatables.net/ datatables下载地址:https://www.datatables.net/down ...
- datatables 前端表格插件 增删改查功能
官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
随机推荐
- 【vue】在VS Code中调试Jest单元测试
在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations&qu ...
- linux 相关指令
modinfo *.ko 显示驱动文件的信息.
- 修改 Django Administration
只需要在django项目下的APP下的admin.py重写以下几个变量即可,不需要改django源码 from django.contrib import adminadmin.site.site_t ...
- awk 实用案例介绍
awk 简介 • awk是 3 个姓氏的首字母,代表该语言的 3 个作者 • awk的版本有很多,包括: 旧版 awk,新版 awk(nawk), GNUawk(gawk)等 • awk程序有 awk ...
- 三石之道之Ansible自动化运维工具部署
centos6默认python版本为2.6 centos7默认python版本为2.7 ansible需要最低python2.7的支持 总结:centos6要部署ansible工具,需要先升级pyth ...
- T-SQL Part VI: Prevent error message "Saving changes is not permitted" in SSMS
使用SSMS时,经常遇到的问题是,修改一张table时,弹出一个错误对话框:“Saving changes is not permitted”. 这个错误通常是因为以下错误(参阅MSDN的KB文档 h ...
- 【笔记】nginx部署静态网站
安装nginx 本地到官网下载,然后把压缩包传到服务器上 安装三个依赖 apt-get install libpcre3 libpcre3-dev apt-get install zlib1g-dev ...
- (C#)WPF:关于INotifyPropertyChanged接口的介绍
注意:INotifyPropertyChanged接口位于System.CompenentModel名称空间中,想使用INotifyPropertyChanged接口时,头文件需添加“using Sy ...
- 自建yum仓库,该仓库为默认仓库
YUM REPO: http://content.example.com/rhel7.0/x86_64/dvd 创建自建yum REPO文件: vim /etc/yum.repos.d/redhat. ...
- 忘记Linux登录密码的破解方法
注意:1.破解方式只限于7.0以后的Linux系统. 2.要注意自己linux系统中有没有开启selinux,如果开启则在后面要建一个名为:autorelabel的隐藏文件. 1.启动Linu ...