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

最新推荐文章于 2023-05-05 16:06:17 发布

weixin_30566149

最新推荐文章于 2023-05-05 16:06:17 发布

阅读量210

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/jjdw/p/7324404.html

版权

一、背景

　　项目里面有个表格模块，要提供表格的过滤、排序、分页、编辑、打印等功能；在网上找了不少控件，其中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()；另外附上界面图片：

转载于:https://www.cnblogs.com/jjdw/p/7324404.html

weixin_30566149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端用Datatables制作包含搜索、自动分页、按列排序、切换显示条数、打印以及多种文件格式保存等功能的Demo...

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

扫一扫