一、背景
项目里面有个表格模块，要提供表格的过滤、排序、分页、编辑、打印等功能；在网上找了不少控件，其中SpreadJS这个纯前端表格控件基本上可以实现excel的所有功能，完美满足要求，不过是收费了的，只能作罢，后来发现Datatables其实也不错，扩展功能多，而且自己也可以另外在写一些功能进去。Datatables的文档官网上面有，各种用法的例子也很多：
仔细查找总会有你想要的。
二、基础用法
引入jquery、dataTables的js与css，然后初始化一个table标签就可以了。
$(document).ready(function() { $().DataTable(); });
至于表格中的数据有多种方式添加进去，比如<table>标签里面本来就已经包含了所有的数据，或者通过js定义的数据以及通过ajax从后台获取的数据：
Column 1Column 2Column 3Column 4]]; ).DataTable( 17 data:data );
这些都比较简单，不过添加扩展功能或者结合bootstrap样式，会有一点点麻烦，不过多试一下文档，也很简单了，这里主要是把实现标题所说的功能，需要引入的文件列出来一下，避免不必要的麻烦
这里面有些文件是dataTables包里面没有的需要单独去下载，pdfmake和JSZip。
按钮的初始化：
var table = $('#example').DataTable({
//ajax: 'server/data',
data: data,
buttons: [{
extend: 'copy',
className: 'btn btn-default', //添加额外的样式
text:'<span></span>' //字体图标
}, {
extend: 'csv',
className: 'btn btn-default',
text:'<span></span>'
}, {
extend: 'excel',
className: 'btn btn-default',
text:'<span></span>'
}, {
extend: 'pdf',
className: 'btn btn-default',
text:'<span></span>'
}, {
extend: 'print',
className: 'btn btn-default',
text:'<span></span>'
}],
});
table.buttons().container().appendTo($('.buttons')); //把按钮添加到指定的容器里面
另外有一点就是表格中的数据是不可编辑的，我就写了一个单击某个单元格，将其变成一个输入框，外表看来只是多了一个光标，类似excel的编辑效果，输入框获得焦点，光标在文字的尾部代码奉上
/** * 输入框获得焦点后，光标在文字最后面 * @param {[type]} position [description] * @return {[type]} [description] */ $.fn.setCursorPosition = function(position) { if (this.lengh == 0) return this; return $(this).setSelection(position, position); } $.fn.setSelection = function(selectionStart, selectionEnd) { if (this.lengh == 0) return this; input = this[0]; if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } else if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } return this; } $.fn.focusEnd = function() { this.setCursorPosition(this.val().length); }
直接调用就可以了：$('input').focusEnd()；另外附上界面图片：
相关文章
精彩导读
热门资讯
关注我们
