jquery dataTables例子
https://datatables.net/examples/styling/bootstrap.html
http://datatables.club/example/#styling
http://blog.csdn.net/hefangju/article/details/50333609'
http://www.cnblogs.com/Leo_wl/p/4289289.html
http://www.guoxk.com/node/jquery-datatables
http://stackoverflow.com/questions/11011796/trying-to-custom-style-datatables-table
http://stackoverflow.com/questions/5509303/customized-table-style-when-using-jquery-datatables
ajax:
https://datatables.net/manual/server-side
https://datatables.net/examples/data_sources/server_side.html
return:
draw |
integer |
The draw counter that this object is a response to - from the draw parameter sent as part of the data request. Note that it is strongly recommended for security reasons that you cast this parameter to an integer, rather than simply echoing back to the client what it sent in the draw parameter, in order to prevent Cross Site Scripting (XSS) attacks. |
recordsTotal |
integer |
Total records, before filtering (i.e. the total number of records in the database) |
recordsFiltered |
integer |
Total records, after filtering (i.e. the total number of records after filtering has been applied - not just the number of records being returned for this page of data). |
data |
array |
The data to be displayed in the table. This is an array of data source objects, one for each row, which will be used by DataTables. Note that this parameter's name can be changed using the ajax option's dataSrc property. |
error |
string |
Optional: If an error occurs during the running of the server-side processing script, you can inform the user of this error by passing back the error message to be displayed using this parameter. Do not include if there is no error. |
laravel eloquent limit offset
$users = DB::table('users')->skip(10)->take(5)->get();
https://laravel-china.org/docs/5.1/queries#ordering-grouping-limit-and-offset
ajax例子:
https://coderexample.com/jquery-datatable-with-custom-json-format-in-php-mysql
columndefs:
https://datatables.net/reference/option/columnDefs
targets:
- 0 or a positive integer - column index counting from the left
- A negative integer - column index counting from the right
- A string - class name will be matched on the TH for the column
- The string
_all
- all columns (i.e. assign a default)
targets也可以是一个数组。
targets: [ -1, -2 ]
would target the last and second last columns in the table.
var
table = $(
'#myTable'
).DataTable( {
columnDefs: [
{ targets: [0, 1], visible:
true
},
{ targets:
'_all'
, visible:
false
}
]
} );
columns
这个指定了传过来的数据的字段,visible字段默认是true,如果设置false的话,显示的时候是隐藏的,当然也可以通过空间取消其隐藏。 发现columns不仅传给服务器,客户端也会用到。
columns:[
{data:"name_id"},
{data:"id",},
我把name_id和id调换,值也会调换。
设置某列宽度
columns:[
{data:"id",width:'50%',},
还可以在columns设置orderorderable: false ,
columns会传给服务器。
post给服务器的类似:
..
- columns[5][data]:status
- columns[5][name]:
- columns[5][searchable]:true
- columns[5][orderable]:true
- columns[5][search][value]:
- columns[5][search][regex]:false
- columns[6][data]:created_at
- columns[6][name]:
- columns[6][searchable]:true
- columns[6][orderable]:false
- columns[6][search][value]:
- columns[6][search][regex]:false
- order[0][column]:0
- order[0][dir]:asc
- start:0
- length:5
- search[value]:
- search[regex]:false
$(
'#example'
).dataTable( {
"columnDefs"
: [
{ className:
"my_class"
,
"targets"
: [ 0 ] }
]
} );
$('#datatable_demo').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server-json-data.php",
"type": "POST",
"dataSrc": "records"
},
"columns": [
{ "data": "invoice_no" }, 、、这里data返回指定的列名 ,如果默认可以写为null.
{ "data": "product_name" },
{ "data": "delivery_status" },
{ "data": "pin_code" },
],
"columnDefs": [
{
"targets": 2,
"render": function ( data, type, row,meta ) {
return data == 1 ? 'Delivered': 'Not delivered';
}
},
{
"targets": 3,
"render": function ( data, type, row ,meta) {
return row["city"] +', ' + row["country"] +', '+data;
}, },
]
});
$('#example').dataTable( {
"columns": [
{ "searchable": false },
null,
null,
null,
null
]
} );
禁止sort:
columnDefs:[
// {targets:0,visible:false},
{
targets:-2,
render:function(data,type,row,meta){
if(data==1)
return "<span class='label label-success radius'>正常</span>";
return "<span class='label label-danger radius'>维护</span>"; }
},
{
targets:[1,2,3], orderable: false
}, ]
交互式:
https://coderexample.com/datatable-responsive-server-side/
reload:
https://datatables.net/reference/api/ajax.reload()
Send request as POST:
Javascript
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"type": "POST"
}
} );
Add data to the request, returnng an object by extending the default data:
$(
'#example'
).dataTable( {
"ajax"
: {
"url"
:
"data.json"
,
"data"
:
function
( d ) {
return
$.extend( {}, d, {
"extra_search"
: $(
'#extra'
).val()
} );
}
}
} );
function datatablessearch()
{
datableCurr.ajax.reload();
}
dataableCurr能用ajax,要注意是大写的DataTable()调用得到DataTables对象,否则用小写dataTable()得到的是juqery对象,没有ajax方法。
$( selector ).DataTable();
- DataTables constructor$( selector ).dataTable().api();
- DataTables jQuery constructor
jquery dataTables例子的更多相关文章
- jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...
- jQuery datatables
jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...
- jquery datatables api (转)
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 最全的jquery datatables api 使用详解
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- jquery datatables api
原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...
- jquery.dataTables的用法
写页面前端时,使用表格的插件可以快速漂亮的排版.本例子中使用jquery.dataTables来处理table.直接来点干货 html代码如下 <table cellpadding=" ...
- jquery datatables 学习笔记
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...
- Jquery DataTables 自定义布局sdom
Jquery DataTables 自定义布局sdom JQuery Datatable sDom 配置 官网给的描述是: This initialisation variable allows yo ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
随机推荐
- EHCI规范(转)
https://blog.csdn.net/qiurihuanghua/article/details/6411640 1. EHCI 1.0规范介绍 EHCI规范为USB 2.0规范定义了一个Hos ...
- db2 查询表前几行
不需要那么多不需要那么多数据的时候使用fetch first xxx rows only数据的时候使用fetch first xxx rows only
- 所生成项目的处理器架构“MSIL”与引用“***”的处理器架构“x86”不匹配。这种不匹配可能会导致运行时失败。请考虑通过配置管理器...
警告:所生成项目的处理器架构“MSIL”与引用“***”的处理器架构“x86”不匹配.这种不匹配可能会导致运行时失败.请考虑通过配置管理器更改您的项目的目标处理器架构,以使您的项目与引用间的处理器架构 ...
- CH 1602 - The XOR Largest Pair - [字典树变形]
题目链接:传送门 描述在给定的 $N$ 个整数 $A_1, A_2,\cdots,A_N$ 中选出两个进行xor运算,得到的结果最大是多少? 输入格式第一行一个整数 $N$,第二行 $N$ 个整数 $ ...
- [development][dpdk] dpdk-pmdinfo 工具的使用
发现了一个工具 dpdk-pmdinfo 但是文档介绍的很不清楚, http://dpdk.org/doc/guides/tools/pmdinfo.html 经过摸索, 这可能就是一个查询 dpdk ...
- Copycat - 状态
Member.Status status的变迁是源于heartbeat heartbeat,append空的entries /** * Triggers a heartbeat to a majori ...
- 压缩维度oj P1173+P1174+P1164
今天在洛谷上刷dp,忽然冒出一道求最大字段和的问题,然后忘了瞬间忘了这是dp,几分钟一个贪心出来了成功ac,忽然想起自己在作dp,于是乖乖刷dp. 这个可能很多人都会但是今天有4种解法哦,本人只尝试了 ...
- DBGridEh表尾显示合计 .....
设置如下就可以了..... FooterRowCount : 1 SumList--------Active:=true 双击 DBGridEh 加入所需要的列....然后在 需要合计的..... ...
- oracle执行计划相关
执行计划相关 根据Operation缩进来判断,缩进最多的最先执行:(缩进相同时,最上面的最先执行) 同一级如果某个动作没有子ID就最先执行 同一级的动作执行时遵循最上最右先执行的原则 TABLE A ...
- HashMap如何解决取Value值为Null
场景: 用HashMap方法时候,取Keys时候自认为敲的肯定是准确无误,然后能得到对应的Values 值. 但写脚本代码时候不好习惯,没事总喜欢敲个空格建,导致取Keys之后多空格. Featur ...