Bootstrap DataTable自定义表格 设置某列不排序

很多情况下,我们使用外来插件不一定满足自己的业务需求。所以一般插件都会提供自定义的功能给用户做出自己想要的效果。

DataTable提供的表格样式里面,第一行都是会有排序功能的,但是如果遇到我们想将第一列设置为chexkbox,那也就是说这一列我们不需要排序,如图:


我们可以改写一下jquery代码:

$(document).ready(function () {
            $('#dataTables-example').DataTable({
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [0]}],
            });
        });

但是,改完之后会发现,页面一加载之后,第一列总是会有排序的箭头,如图:


是因为插件本身设定在页面加载进去之后以第一列为开始做排序,也就是第0列

所以我们还需要再加段代码:

$(document).ready(function () {
            $('#dataTables-example').DataTable({
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [0]}],
                "aaSorting": [[1, "desc"]]
            });
        });

这样就可以解决问题,使程序本身从第一列开始排序。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在 Bootstrap 中自定义排序,您可以使用以下步骤: 1. 首先,您需要使用 JavaScript 将您的数据排序。 2. 然后,使用 jQuery 将您的已排序数据添加到 Bootstrap表格中。 3. 最后,您需要重新绘制 Bootstrap 表格以使用新的排序数据。 下面是一个简单的示例,演示如何使用 JavaScript 和 jQuery 自定义排序 Bootstrap 表格: HTML 代码: ```html <table id="myTable" class="table"> <thead> <tr> <th>名称</th> <th>价格</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>商品 A</td> <td>100</td> <td>5</td> </tr> <tr> <td>商品 B</td> <td>50</td> <td>10</td> </tr> <tr> <td>商品 C</td> <td>200</td> <td>2</td> </tr> </tbody> </table> ``` JavaScript 代码: ```javascript // 自定义排序函数 function sortTable(table, column, asc) { var tbody = table.find('tbody'); var rows = tbody.find('tr').toArray(); rows.sort(function(a, b) { var aVal = $(a).children('td').eq(column).text(); var bVal = $(b).children('td').eq(column).text(); if (asc) { return (aVal > bVal) ? 1 : -1; } else { return (aVal < bVal) ? 1 : -1; } }); $.each(rows, function(index, row) { tbody.append(row); }); } // 切换排序按钮点击事件 $('#myTable th').click(function() { var table = $(this).closest('table'); var column = $(this).index(); var asc = $(this).hasClass('asc'); table.find('th').removeClass('asc desc'); if (asc) { $(this).addClass('desc'); } else { $(this).addClass('asc'); } sortTable(table, column, asc); }); // 初始排序 sortTable($('#myTable'), 0, true); ``` 在这个示例中,我们将表头单元格的点击事件绑定到 `sortTable()` 函数,该函数将使用 `asc` 参数指定升序或降序排序。在单元格上添加 `.asc` 或 `.desc` 类将更改箭头的方向。`sortTable()` 函数将使用 jQuery 的 `text()` 方法获取单元格的值,然后将行按升序或降序排序,并使用 `append()` 方法将它们添加回 Bootstrap 表格中。 您可以根据需要自定义此示例,例如使用不同的排序算法、添加更多的、使用 AJAX 从服务器检索数据等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值