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 }

    ]

} );

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的数据