1.由于表格中列比较多,拖动的时候,就会导致用户体验不好,需要冻结前几列,滚动的时候始终看到这几个列,
JQuery datatables 插件固定几列,可以使用datatables扩展的插件FixedColumns: 下载链接如下:https://datatables.net/releases/FixedColumns-3.2.2.zip,
一个国外的很好例子网站:http://jsfiddle.net/PEN7T/,官方例子:http://legacy.datatables.net/extras/fixedcolumns/,https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
注:如果配置不正确,会出现下列错误的:
DataTables warning (table id = 'sample_1'): FixedColumns is not needed (no x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for column fixing when scrolling is not enabled
2.需要的文件如下:
http://cdn.datatables.net/fixedcolumns/3.0.1/css/dataTables.fixedColumns.css
http://cdn.datatables.net/fixedcolumns/3.0.1/js/dataTables.fixedColumns.min.js
http://cdn.datatables.net/1.9.4/js/jquery.dataTables.js
http://cdn.datatables.net/1.9.4/css/jquery.dataTables.css
为了实现固定列,必须使用的四个文件,放在项目文件中,记得导入到你的jsp文件里面,具体的实现代码如下:
3.jsp文件如下:
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">HR Information</th>
<th colspan="3">Contact</th>
</tr>
<tr>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
<td>Tokyo</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
<td>San Francisco</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>$433,060</td>
<td>Edinburgh</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>$162,700</td>
<td>Tokyo</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
</tbody>
</table>
4.js控制表格的固定列的代码如下:
var datatables_options = {
"bAutoWidth": true,
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"bPaginate": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bSort": true,
"bFilter": false,
"bInfo": false,
"bStateSave": false,
"iCookieDuration": 0,
"bScrollAutoCss": true,
"bProcessing": true,
"bJQueryUI": false
};
datatables_options["sScrollY"] = "450px";
datatables_options["sScrollX"] = "100%";
datatables_options["bScrollCollapse"] = true;
// add this
datatables_options["sScrollXInner"] = '150%';
//
var table = $('#example').DataTable(datatables_options);
new $.fn.dataTable.FixedColumns(table,{"iLeftColumns":2
} );
运行效果如图:
ps:如果你使用复选框,你会发现,当设置了固定列之后,选中效果没有了,你需要监听一下列表的那个复选框,动态添加选中的效果,注意点是表头的复选框没有更新状态,但其实已经勾选了,是因为js在后台给他加了一个class来控制勾选与否,所以你需要重新添加一个checked的class,才能刷新复选框的状态.(这种情况在点击下拉列表,读取本地保留的复选框状态,刷新下拉列表同样有这个问题,),解决方式如下:
//2016年10月31日16:38:51:qiulinhe:固定列的复选框在查询数据之后更新状态
$("#check-all").click(function(){
var val = $(this).prop("checked");
$("input[type='checkbox']",".DTFC_Cloned").attr("checked",val);
$("#check-all").attr("checked",val);
if(val){
$(this).parent().addClass("checked");//这里需要注意的是js会自动加上一个class,checked,需要加上才有选中效果
}else{
$(this).parent().removeClass("checked");
}
});
========================================================分割线,2016年11月28日14:55:28================================================
有一个很严重的问题是:使用了固定列的功能,会自动发送两次ajax,如果数据量很多的话,就会导致很卡的问题,官方的FixedColumns的讨论网页说1.8的有用,还没试过,有知道的可以讨论下
=================================分割线,09:54:36-===============================
上面那个严重的问题,是使用固定列fixcolumns插件导致发送两次ajax请求,不过到官方下载最新版本的3.2之后就不会有这个问题了,浏览器debug时候查看网络就可以看到。