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:

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 }    ]} );https://datatables.net/reference/option/columns.className columns和columnDefs区别：

columns
这个指定了传过来的数据的字段，visible字段默认是true，如果设置false的话，显示的时候是隐藏的，当然也可以通过空间取消其隐藏。  发现columns不仅传给服务器，客户端也会用到。

columns:[
{data:”name_id”},
{data:”id”,},

我把name_id和id调换，值也会调换。

设置某列宽度

columns:[
{data:”id”,width:’50%’,},

还可以在columns设置orderorderable: false ,

columns会传给服务器。

post给服务器的类似:

..

1. columns[5][data]:status
2. columns[5][name]: 
3. columns[5][searchable]:true
4. columns[5][orderable]:true
5. columns[5][search][value]: 
6. columns[5][search][regex]:false
7. columns[6][data]:created_at
8. columns[6][name]: 
9. columns[6][searchable]:true
10. columns[6][orderable]:false
11. columns[6][search][value]: 
12. columns[6][search][regex]:false
13. order[0][column]:0
14. order[0][dir]:asc
15. start:0
16. length:5
17. search[value]: 
18. 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

服务器接受到extra_search的数据