bootstrap datatable使用感受

最新推荐文章于 2023-01-04 01:15:49 发布

层楼中人

最新推荐文章于 2023-01-04 01:15:49 发布

阅读量3.7k

点赞数 3

分类专栏：前端学学

本文链接：https://blog.csdn.net/zimu_2080/article/details/89710406

版权

前端学学专栏收录该内容

9 篇文章 1 订阅

订阅专栏

datatable学习以及相关例子可以再这个地址看看：http://datatables.club/example/#api。

使用datatable实现的一个表格效果：
在这里插入图片描述
这个控件会自动实现显示条目，关键字搜索，分页，排序等等系列操作，只需要你引入相关库，调用api就可以。

所以在项目一开始，就选择了这个datatable。后来在使用过程中才发现，也许并不是那么顺利，而且在百度上找到的资料也不是很多，头都大了。

table代码：

<table id="bootstrap-data-table" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>序号</th>
                                    <th>操作</th>
                                    <th>早晚课标题</th>
                                    <th>早晚课内容</th>
                                    <th>课程日期</th>
                                    <th>发布时间</th>
                                    <th>类型</th>
                                    <th>课程状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <label class="switch switch-3d switch-primary mr-3">
                                            <input type="checkbox" class="switch-input">
                                            <span class="switch-label"></span>
                                            <span class="switch-handle"></span>
                                        </label>
                                    </td>
                                    <td>1</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="switch switch-3d switch-primary mr-3">
                                            <input type="checkbox" class="switch-input">
                                            <span class="switch-label"></span>
                                            <span class="switch-handle"></span>
                                        </label>
                                    </td>
                                    <td>2</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>

然后再js中要操作：

<script type="text/javascript">
    $(document).ready(function() {
        $('#bootstrap-data-table-export').DataTable();
    } );
</script>

然后就是要导入一些库，这里的库要自己去下载的：

<script src="assets/js/lib/data-table/datatables.min.js"></script>
<script src="assets/js/lib/data-table/dataTables.bootstrap.min.js"></script>
<script src="assets/js/lib/data-table/dataTables.buttons.min.js"></script>
<script src="assets/js/lib/data-table/buttons.bootstrap.min.js"></script>
<script src="assets/js/lib/data-table/jszip.min.js"></script>
<script src="assets/js/lib/data-table/vfs_fonts.js"></script>
<script src="assets/js/lib/data-table/buttons.html5.min.js"></script>
<script src="assets/js/lib/data-table/buttons.print.min.js"></script>
<script src="assets/js/lib/data-table/buttons.colVis.min.js"></script>
<script src="assets/js/init/datatables-init.js"></script>

导入样式文件：

<link rel="stylesheet" href="assets/css/lib/datatable/dataTables.bootstrap.min.css">

这样就能完成一个静态文件。
然后简单配置如下，通过静态data渲染数据。

<script>
    var data = [['', '三体', '三体', '刘慈欣', '99.00', '出版社', '9825109093213516'],
        ['', '三体', '三体', '刘慈欣', '99.00', '出版社', '98251321399009516']];*/
    jQuery(document).ready(function($) {
        $(function () {
            var table = $('#table-id').DataTable({
                data: data,
                "pagingType": "full_numbers",
                "bSort": false, //排序功能
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                "order": [[1, 'asc']],
                "columnDefs" : [{
                    "searchable": false,
                    "orderable": true,
                    "targets": 0,
                     render : function(id, type, row, meta) {
                        return '<input id="input-' + id
                            + '" type="checkbox" name="ids" value=' + id
                            + '><label for="input-' + id + '"></label>';
                    }
                }]
            });
            table.on('order.dt search.dt', function () {
                table.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            $('#table-id tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });

        });
    });
</script>

但是项目开始了，我要实现的是从后台拿到json data数据再来填充datatable。于是看到datatable可以通过自带的ajax数据源来实现导入数据。所以就将上面的改写：

<script>
    var datatable;
    jQuery(document).ready(function($) {
        //方案一，失败了，把用ajax请求服务器的数据赋值给datatable，再传到datatable中的data属性，依旧失效。
        $.ajax({
            url:"http://192.168.20.56:7799/user/list?page=1&order=id&asc=0",
            type:"GET",
            dataType : 'json',
            success : function(result) {
                alert("status = " + result.status + " maxcount = " + result.maxcount + " data = " + result.datas);
                if (result.status == 0) {
                    datatable = result.datas;
                }else{

                }
            },
            error : function() {
                alert("table--服务器请求异常");
            }
        });
        $(function () {
            var table = $('#table-id').DataTable({
                data: datatable,
                "pagingType": "full_numbers",
                "bSort": false, //排序功能
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                "order": [[1, 'asc']],
                方案二  根据api中写的，直接用ajax数据源，但是了就是不行不行不行不行
                /*"ajax":{
                    url:"/user/list?page=1&order=id&asc=0",
                    type:"GET",
                    dataType : 'json',
                    success : function(result) {
                        alert("status = " + result.status + " maxcount = " + result.maxcount + " data = " + result.datas);
                        if (result.status == 0) {

                        }else{

                        }
                    },
                    error : function() {
                        alert("table--服务器请求异常");
                    }
                },*/
                "columns" : [ {
                    data : "id",
                    'sClass': "text-center"
                },{
                    data : "id",
                    defaultContent : "",
                    'sClass': "text-center"
                },{
                    data : "state",
                    defaultContent : "",
                    'sClass': "text-center"
                },{
                    data : "name",
                    defaultContent : "",
                    'sClass': "text-center"
                }, {
                    data : "nickname",
                    defaultContent : "",
                    'sClass': "text-center"
                },{
                    data : "phonenum",
                    defaultContent : "",
                    'sClass': "text-center"
                },{
                    data : "address",
                    defaultContent : "",
                    'sClass': "text-center"
                }],
                "columnDefs" : [{
                    "searchable": false,
                    "orderable": true,
                    "targets": 0,
                     render : function(id, type, row, meta) {
                        return '<input id="input-' + id
                            + '" type="checkbox" name="ids" value=' + id
                            + '><label for="input-' + id + '"></label>';
                    }
                }]
            });
            table.on('order.dt search.dt', function () {
                table.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            $('#table-id tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });

        });
    });
</script>

试了两种方案之后，实在是觉得脑壳大了，然后后台同事那边开始联调就很急了，所以就暂时放弃了，用来js最原始的方式给table动态添加数据。
我觉得bootstarp datatable确实是有点麻烦啊，那api写的无fuck说，网上资料又比较少。

层楼中人

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
bootstrap datatable使用感受

datatable学习以及相关例子可以再这个地址看看：http://datatables.club/example/#api。使用datatable实现的一个表格效果：这个控件会自动实现显示条目，关键字搜索，分页，排序等等系列操作，只需要你引入相关库，调用api就可以。所以在项目一开始，就选择了这个datatable。后来在使用过程中才发现，也许并不是那么顺利，而且在百度上找到的资料也不是...
复制链接

扫一扫