datatable结合php使用（yii2）

1、官网地址： http://datatables.club/example/server_side/simple.html http://datatables.club/example/diy.html

2、
基本常用设置：
前端设置：
$this->registerJs("
$(function() {
var times = false;//防止多次回调显示重复
$('#example').DataTable( {
'bJQueryUI': true, //可以控制分页的样式好看紧凑，等等
'aLengthMenu': [[2, 5, 10, 25, 50], ['2', '5', '10', '25', '50']],  //设置每页显示记录的下拉菜单
//'bLengthChange': false,  //将显示一页多少条记录的选项关闭
'paging': false, //关闭分页
'oLanguage': {
'sLengthMenu': '每页显示 _MENU_ 条记录',
'sZeroRecords': '对不起，查询不到任何相关数据',
'sInfo': '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
'sInfoEmtpy': '找不到相关数据',
'sInfoFiltered': '数据表中共为 _MAX_ 条记录)',
'sProcessing': '正在加载中...',
'sSearch': '搜索',
'sUrl': '', //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
'oPaginate': {
'sFirst':    '第一页',
'sPrevious': ' 上一页 ',
'sNext':     ' 下一页 ',
'sLast':     ' 最后一页 '
},
}, //多语言配置
'bFilter': false, //搜索栏
'bSortClasses': true,
'bSort': true,
'order': [[0, 'desc']], //指定默认的次序
'bInfo' : false,
'sScrollX': '100%', //横向滚动条
'sScrollY': '60%',
//'sScrollX': '2000px',
'processing': true,//等待加载效果
//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
deferRender : true,
//==========请求数据start
'serverSide': true,
'ajax': {
'url': '/pay-analyse/data?proId=' + $pro_id,
'type': 'post',
},
//==========请求数据end
'aoColumns' : [
{ 'sTitle': '日期', 'name': 'stat_date', 'sClass': 'center', sWidth:'50px'},
{ 'sTitle': '渠道', 'name': 'pf_name', 'bSortable': false},//禁止此列排序
{ 'sTitle': '新增账号', 'name': 'new_user' },
],
//为每一列对应值设置属性
'columnDefs':[
{
'targets':['_all'],
'width': '28px',
'orderSequence':['desc', 'asc'],  //规定点击排序之后的顺序，默认第一次排序是降序
//                    'render':function(data, type){ //为某一列设置特殊属性
//                        return "<span style='color:red'>" + data + '</span>';
//                        //return "<i class='fa fa-question-circle'>" + '' + '</i>';
//                    }
}
],
//行回调函数
'fnRowCallback': function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td:eq(0)', nRow).html( '<b>A</b>' );
},
createdRow: function(row, data, dataIndex) {
var sdate = new Date(Date.parse(data[0].replace(/-/g, "/"))),
weekday = sdate.getDay();
if (0 == weekday || 6 == weekday) { // 周末
$(row).addClass("text-success");
}
},
//表头回调 加上小标签
'fnHeaderCallback': function( nHead, aData, iStart, iEnd, aiDisplay ) {
var ths = nHead.getElementsByTagName('th');
var thArr = [3,4,7,8];//这几列需要帮助提示
if(!times)
{
for(var i = 0; i < ths.length; i++)
{
if($.inArray(i, thArr) != -1)
{
nHead.getElementsByTagName('th')[i].innerHTML = nHead.getElementsByTagName('th')[i].innerHTML +
'<a href="javascript:void(0);" style="color: #337ab7;margin-left: 5px;">' +
'<i class="fa fa-question-circle"></i></a>';
times = true;
}
}
}
}
}
//默认数据
'aaData': [
['101', 'aaa', '91,1', '2012-10-10', 'X', 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
],
})
});
");

php处理：
$pro_id = \Yii::$app->request->get('proId');
$posts = \Yii::$app->request->post();

//$query = Product::find()->where(['product_id' => $pro_id])->orderBy('add_time DESC');
$query = Product::find()->orderBy('add_time DESC');
$products = $query->offset($posts['start'])->limit($posts['length'])->asArray()->all();

$info = [];
foreach ($products as $val)
{
$obj = [$val['product_id'], $val['product_name'], '1', '1', '1', 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
array_push($info, $obj);
}

$data = [
'draw' => intval($posts['draw']),
'data' => $info,
'recordsTotal' => $query->count(),
'recordsFiltered' => $query->count(),
];
echo json_encode($data);
die;

除此之外，如果还想加上排序功能，可以继续添加：
//排序功能
$sort_column = $posts['order'][0]['column']; //哪一列需要排序

4000
$sort_type = $posts['order'][0]['dir']; //排序方式  asc or desc
$order_sql = 'stat_date DESC';

switch ($sort_column)
{
case 1:
break;
default:
$order_sql = $posts['columns'][$sort_column]['name'] . ' ' . $sort_type;  //这里要在插件的aoColumns属性中说明name
break;
}
$query = Product::find()->orderBy($order_sql);
3、相关样式调整： https://datatables.net/manual/styling/theme-creator 在yii框架中如果需要修改样式文件，不能直接修改datatable的css。只能重新写css，并且在datatable的css文件之后引入。

4、扩展：
1》列的固定：可以参考yii框架中自带的datetable中的example中的范例。
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY:        "300px",
scrollX:        true,
scrollCollapse: true,
paging:         false
} );
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 2
} );
} );

2》行的固定：
3》动态传递参数：
可以参考datatable官网中ajax.data相关。
var name = $("#seName").val();
var admin = $("#seAdmin").val();
var param = {
"obj.name": name,
"obj.admin": admin
};
oTable.settings()[0].ajax.data = param;
oTable.ajax.reload();
4》table的select
需要插件dataTables.select.min.js  官网上可以找到。
其实用js就可以实现单击单行高亮：
$('#table_local tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
多选multiselect:
$('#table_local tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
5》一些常用的js
//鼠标双击事件，弹出提示。
$('#table_local tbody').on('dblclick','tr',function() {
//获取该行数据
var data = table.row(this).data();
//做一些其他操作
});
//点击某行后高亮
$('#table_local tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
//鼠标经过时高亮
$('#table_local tbody').on( 'mouseover', 'td', function () {
var colIdx = table.cell(this).index().column;
if ( colIdx !== lastIdx ) {
$( table.cells().nodes() ).removeClass( 'highlight' );
$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
}
} ).on( 'mouseleave', function () {
$( table.cells().nodes() ).removeClass( 'highlight' );
} );
备注：这里的table是dataTable初始化的名称。var table = $('#test').datatable();

6》结合dataRangePicker实现dataTable传入参数(代码比较完整) http://datatables.club/example/user_share/send_extra_param.html 效果图如下：

7、如果需要动态的修改dt的排序列，请使用这个：

myTable.column( '0' ).order( 'desc' ).draw();
备注：如果需要动态修改columnDefs中某一列的render，我采用的办法是使用全局变量来调整。

==========2017-11-09更新==========
8、
//固定第一列
var fc = new $.fn.dataTable.FixedColumns( myTable, {
leftColumns: 1
} );
myTable.columns.adjust();  //当dt重载数据的时候需要调整列宽度
fc.fnUpdate(); //dt重载数据的时候，固定列的宽度或者高度会发生变化。一定要使用这个调整下。或者使用这个fc.fnRedrawLayout();

如果引入了highchart插件：
$('#container').highcharts().reflow(); //重新调整宽度
==========2017-11-09更新==========

问题总结：
1、columndefs不起作用了？
以下是源代码：
'columnDefs':[
{
'targets':['_all'],
'width': '28px',
'render':function(data, type){
if(data == null) return '-';
return data;
}
}，
{
'targets':[3, 4, 5, 6, 7, 8, 9, 10],
'width': '28px',
'render':function(data, type, row){
return data + '%';
}
}
],
解决办法：
倒换位置。
'columnDefs':[
{
'targets':[3, 4, 5, 6, 7, 8, 9, 10],
'width': '28px',
'render':function(data, type, row){
return data + '%';
}
},
{
'targets':['_all'],
'width': '28px',
'render':function(data, type){
if(data == null) return '-';
return data;
}
}
],