https://datatables.net/examples/styling/bootstrap.html
http://datatables.club/example/#styling
http://blog.****.net/hefangju/article/details/50333609'
http://www.cnblogs.com/Leo_wl/p/4289289.html
http://www.guoxk.com/node/jquery-datatables
http://*.com/questions/11011796/trying-to-custom-style-datatables-table
http://*.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]:
-
order[0][dir]:asc
-
start:
-
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