正文  软件开发 > html5 >

前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo,datatablesdemo

前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo,datatablesdemo一、背景   项目里面有个表格模块,要提供表格的过滤...

前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo,datatablesdemo

一、背景

  项目里面有个表格模块,要提供表格的过滤、排序、分页、编辑、打印等功能;在网上找了不少控件,其中SpreadJS这个纯前端表格控件基本上可以实现excel的所有功能,完美满足要求,不过是收费了的,只能作罢,后来发现Datatables其实也不错,扩展功能多,而且自己也可以另外在写一些功能进去。Datatables的文档官网上面有,各种用法的例子也很多:

  仔细查找总会有你想要的。

二、基础用法

  引入jquery、dataTables的js与css,然后初始化一个table标签就可以了。

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
 
<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body>
    <div>
        <table id="example"><table>
    </div>
</body>
<!--初始化代码-->
<script>
     $(document).ready(function() {
           $(‘#example‘).DataTable();
      });
</script>

  至于表格中的数据有多种方式添加进去,比如<table>标签里面本来就已经包含了所有的数据,或者通过js定义的数据以及通过ajax从后台获取的数据:

 1 <table id="example">
 2             <thead>
 3                 <tr>
 4                     <th>Column 1</th>
 5                     <th>Column 2</th>
 6                     <th>Column 3</th>
 7                     <th>Column 4</th>
 8                 </tr>
 9             </thead>
10             <tbody>
11             </tbody>
12         </table>
13 
14 <script>
15 let data = [[1, 2, 3, 4],[5, 6, 7, 8]];
16 $(‘#example‘).DataTable(
17     data:data
18     //ajax:‘server/data‘ <!--来自服务器的数据-->       
19 );
20 </script>

  这些都比较简单,不过添加扩展功能或者结合bootstrap样式,会有一点点麻烦,不过多试一下文档,也很简单了,这里主要是把实现标题所说的功能,需要引入的文件列出来一下,避免不必要的麻烦

<!-- bootstrap -->
    <link rel="stylesheet" href="./plugIns/bootstrap-3.3.7/css/bootstrap.min.css">
    <!-- table的bootstrap样式 -->
    <link rel="stylesheet" href="./plugIns/datatables-1.10.15/media/css/dataTables.bootstrap.min.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./plugIns/Font-Awesome-3.2.1/css/font-awesome.min.css">
    <!-- table按钮扩展样式 -->
    <link rel="stylesheet" href="./plugIns/datatables-1.10.15/extensions/Buttons/css/buttons.dataTables.min.css">

    <!-- jQuery -->
    <script src="./plugIns/datatables-1.10.15/media/js/jquery.js"></script>
    <!-- DataTables -->
    <script src="./plugIns/datatables-1.10.15/media/js/jquery.dataTables.min.js"></script>
    <script src="./plugIns/datatables-1.10.15/media/js/dataTables.bootstrap.min.js"></script>
    <!-- 按钮的扩展 -->
    <script src="./plugIns/datatables-1.10.15/extensions/Buttons/js/dataTables.buttons.min.js"></script>
    <script src="./plugIns/JSZip-v3.1.3/jszip.min.js"></script>
    <script src="./plugIns/datatables-1.10.15/extensions/Buttons/js/buttons.html5.min.js"></script>
    <script src="./plugIns/pdfmake/0.1.31/pdfmake.min.js"></script>
    <script src="./plugIns/pdfmake/0.1.31/vfs_fonts.js"></script>
    <script src="./plugIns/datatables-1.10.15/extensions/Buttons/js/buttons.print.min.js"></script>

  这里面有些文件是dataTables包里面没有的需要单独去下载,pdfmake和JSZip。

  按钮的初始化:

var table = $(‘#example‘).DataTable({
                //ajax: ‘server/data‘,
                data: data,
                buttons: [{
                    extend: ‘copy‘,
                    className: ‘btn btn-default‘, //添加额外的样式
                    text:‘<span class="icon-copy"></span>‘  //字体图标

                }, {
                    extend: ‘csv‘,
                    className: ‘btn btn-default‘,
                    text:‘<span class="icon-list-alt"></span>‘
                }, {
                    extend: ‘excel‘,
                    className: ‘btn btn-default‘,
                    text:‘<span class="icon-table"></span>‘
                }, {
                    extend: ‘pdf‘,
                    className: ‘btn btn-default‘,
                    text:‘<span class="icon-facebook-sign"></span>‘
                }, {
                    extend: ‘print‘,
                    className: ‘btn btn-default‘,
                    text:‘<span class="icon-print"></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();另外附上界面图片:

  

http://www.bkjia.com/HTML5/1221196.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1221196.htmlTechArticle前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo,datatablesdemo 一、背景 项目里...