bootstrap datatable使用感受

最新推荐文章于 2024-09-20 16:18:06 发布
最新推荐文章于 2024-09-20 16:18:06 发布
阅读量3.8k 收藏 2
点赞数 3
分类专栏： 前端学学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zimu_2080/article/details/89710406
版权

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说，网上资料又比较少。

bootstrap dataTables使用方法
07-31
bootstrap dataTables使用方法 datatables常用API 文档整理很方便
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
10-17
在Bootstrap开发框架中，使用dataTable直接录入表格行数据是一种高效且直观的方式，尤其适用于处理简单业务的明细数据。与传统的弹出窗口录入相比，这种方式在Web应用中提供了更友好的用户体验，增强了数据录入的...
BootStrap-DataTables教程
ajavaer的博客
01-02 1万+
本文3个部分一：什么是DataTablesDatatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor
Bootstrap的Datatable详解
热门推荐
mingtianhaiyouwo的博客
11-24 3万+
$('#scenerytable').dataTable({ "sDom": "r>>", "bProcessing": true,//显示正在处理 "bServerSide": true,//延迟加载 "bPaginate": true,//显示（使用）分页器
基于Bootstrap3和Datatables的Servlet SQLite3数据管理示例
最新发布
weixin_32836713的博客
09-20 1295
本文还有配套的精品资源，点击获取 简介：本项目演示了一个结合Bootstrap3、Datatables、Servlet和SQLite3的后台数据管理系统。Bootstrap3用于构建响应式的用户界面，Datatables展示动态数据和实现前端分页功能，Servlet处理后端数据操作如增删改查，并将结果通过JSON格式返回，SQLite3作为轻量级数据库存储数据。通过Mave...
bootstrap插件 DataTable 的简单使用
dhrnjt3313的博客
07-28 403
最近开发项目时，前后端分离，寻找合适的框架，然后用到了这个DataTable插件，下面简单介绍下基础使用。 1、这款插件还是很强大的，分页，搜索等都很好用，我用的是获取全部数据源，让他进行分页，也可以传参进行后台分页。 头部要引用： <link href="../../Scripts/jquery.dataTables.min.css" rel="styleshe...
bootstrap_datatable
qq_39195596的博客
08-17 699
url : ‘firmSoftTable.action’, // 请求后台的URL（） method : ‘post’, // 请求方式（）post/get contentType: “application/x-www-form-urlencoded”,//post请求的话就加上这个句话 toolbar : ‘#toolbar’, // 工具按钮用哪个容器 striped : true, // ...
关于bootstrap和datatable
xu_xu_0924的博客
05-10 458
1.datatable的单个复选框以及bootstrap的模态框按钮是否禁用 <button id="move_btn" type="button" class="u-btn normal mr0" style="margin-left:10px;" data-toggle="modal" > <i class="fa fa-edit"></i> 批量移动 </button> 只能选中一个
Bootstrap的datatable控件
天高任鸟飞
05-02 1万+
Datatable控件使用非常简单，页面效果如下 首先，添加datatable控件的引用。@*table控件*@ <link href="~/Content/BootStrap/frontmcoinquery/bootstrap-table.css" rel="stylesheet" /> <script src="~/Content/BootStrap/frontmcoinq
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
12-11
在本文中，我们将深入探讨如何使用Bootstrap、jQuery和DataTable库实现异步AJAX来刷新表格数据的方法。这个功能常用于动态更新数据展示，无需页面整体刷新，提高用户体验。 首先，让我们了解一下涉及的关键技术和...
bootstrap+datatable插件
12-19
这是一个datatable插件，并结合了bootstrap的样式和jQuery插件等等，要使用datatale，需要先导入jQuery，如果要使用bootstrap的表格样式，需导入bootstrap的原样式和资源中的bootstrap-3.3.7-dist\datatables_...
datatable+bootstrap
04-02
datatable 自定义传参，服务端返回数据处理
Datatables-Bootstrap3:数据表插件Bootstrap3 UI兼容性
05-09
货叉信息 此派生具有以下更改： 双向CSS文件，可支持从左到右和从右到左的布局 通过以下oLanguage参数控制分页图标类（用于RTL支持）： sIconClassFirst （默认值： glyphicon glyphicon-chevron-backward ） sIconClassLast （默认值： glyphicon glyphicon-chevron-forward ） sIconClassPrevious （默认值： glyphicon glyphicon-chevron-left ） sIconClassNext （默认值： glyphicon glyphicon-chevron-right ） CSS中有关如何使用Font Awesome进行排序的说明（希望更好的支持在1.10中出现在上游-参见） 自我注意：1.10发布后，请重新访问所有这些内容，并查看可以
jQuery表格BootstrapDataTable.zip
07-17
Bootstrap Data Table 是 jQuery 表格插件，可以对表格进行排序，分页和过滤。Bootstrap Data Table 使用 Bootstrap 作为样式，使用 FontAwesome 图标作为表格图标。 在线演示 标签：Bootstrap
Bootstrap Datatable 简单的基本配置
08-17 105
$(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%",//表格的宽度 "sScrollXInner":"110%",//表格的内容宽度 "bScrollCollapse":true,//当显示的数据不足以支撑表格...
datatables
chenliusi的专栏
10-29 275
Jquery DataTables自学笔记 之 基本设置的中文注解 ? $(document).ready(function() {     $('#example').dataTable({ ? "sScrollX": "100%",   //表格的宽度
Bootstrap DataTable 表头设计
落花流水
08-24 1201
摘要发布后不见了。。。
基于bootstrap样式的 自定义 dataTable
abook24的专栏
03-27 1081
我是一名 从事大厂的 web 开发高级开发工程师,平常就喜欢提高工作效率偷懒,结合国内外的各种table表格生成器,的的优缺点,自己写一个 dataTable表格生成器,已经经过大项目实践,觉得好点个赞,想要什么功能,就在下面给我留了,我来迭代实现 已经开源 github 地址: https://github.com/abook23/dataTable 预览地址 http://abook23.co...
bootstrap datatable
04-06
bootstrap datatable 是一种基于 Bootstrap 框架的表格插件，它可以快速地在网页中创建出美观、易用、具有交互性的表格。它具有丰富的功能、灵活的配置、高效的性能等特点，是 web 开发中常用的工具之一。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值