Bootstrap table表格常用操作 hover提示,动态表格,排序字段自定义获取/自定义排序图标

目录

表格标题提示，hover可显示

tooltip (提示框) 

动态创建Table

设置表格标题居中

固定左侧右侧表头

使用data-sortable="true"排序, 自定义获取排序参数

自定义排序图标

---

    Bootstrap中文网

表格标题提示，hover可显示

<tr>
     <th data-width="60" data-field="inviterNum" data-toggle="tooltip" title = "这里设置展示的文字">老访客数</th>
 </tr>

这里使用的是tooltip (提示框)

效果

tooltip (提示框) 

tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

常用的功能，可以通过以下属性来设置：

data-toggle = "tooltip"	指明这是一个tooltip组件对象，其实可以省略
title = "这里设置展示的文字"	提示框显示的内容。
data-trigger = "{click | hover | focus | manual}"	触发提示框的方式： 1、click 【默认】单击时显示或关闭 2、hover 移上去显示，移出去隐藏 3、focus 单击时显示，点击空白处时隐藏 4、manual 手动模式。需要调用js代码触发显示或关闭提示框
data-html = "{false | true}"	设置提示框内容是否支持HTML格式。默认值:false 当值为true时，title属性值可以设置成html代码。不过建议不要这么设置，以防XSS攻击
data-delay = "{数值}"	设置提示框延迟显示。比如 data-delay = "1000" 时，提示框会在执行后1秒才显示。默认值：0
data-animation = {true | false}	是否动画效果显示提示框。默认值 ：false不显示动画效果。
data-container = {string | false}	默认值false， 当提示框用于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。 data-container = "body"
data-placement = {left | top | right | bottom | auto}	设置提示框的显示位置，支持多种设置，比如data-placement="auto left"时，提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

动态创建Table

// 销毁表格
$('#dataTable').bootstrapTable('destroy');

// 创建表格
$("#dataTable").bootstrapTable({
    columns: columnsArray, //列对象
    data: dataArray,//要显示的数据对象
    showColumns: true,
    onLoadSuccess: function (data) {
        // alert(JSON.stringify(data));
    }
});

// 刷新表格数据
$("#dataTable").bootstrapTable('load', list);

设置表格标题居中

可以使用 Bootstrap 的 mx-auto 类或者text-center 类设置居中

// mx-auto

<div class="mx-auto">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

// text-center

<table class="table table-striped">
  <thead>
     <tr>
        <th data-width="60" data-class="text-center" data-field="title">标题</th> 
     </tr>
  </thead>
</table>

固定左侧右侧表头

插件地址

一、

datatables.net-fixedcolumns (v4.3.0) - FixedColumns for DataTables | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

二、

<script src="https://cdn.datatables.net/fixedcolumns/4.0.2/js/dataTables.fixedColumns.min.js"></script>
<link href="http://cdn.datatables.net/fixedcolumns/3.0.1/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css"/>

 三、

GitHub - wenzhixin/bootstrap-table-fixed-columns: https://bootstrap-table.com/docs/extensions/fixed-columns/

在bootstrap-table配置中加入如下配置

url: "",

fixedColumns: true,//开启固定表头（默认固定左侧）
fixedNumber: 4,//固定表头的数量
fixedRightNumber:1,//固定右侧表头的数量；

 使用

    $("#dataTable").bootstrapTable({
        fixedColumns: true, // 启用固定列
        fixedNumber: 4
    });

使用data-sortable="true"排序, 自定义获取排序参数

html

<th data-width="60" data-field="uv" data-sort-name="uv" data-sortable="true">UV</th>

js

// 获取表格里class是desc或asc的对象
var sortOrder = $('#dataTable .desc, #dataTable .asc');
if (sortOrder && sortOrder.length > 0) {
    var div = sortOrder[0];
    var field = div.parentNode.dataset.field;
    var order = div.className.split(' ')[div.className.split(' ').length - 1];

    console.log(field);
    console.log(order);
    if (field) {
        data['sort'] = field;
        data['order'] = order;
    }

}

自定义排序图标

因原来的排序图标不是很明显, 且点击后才有显示, 所以提出优化下

使用本地图片替换原图片

<style>
    /* 自定义排序图标样式 */
    .fixed-table-container thead th .both {
        line-height: 24px; /* 行高等于容器高度 */
        font-weight: bold;
        background-image: url(/static/img/sort/1.png);
        background-repeat: no-repeat;
        background-size: contain; /* 确保图片在容器内完整显示，不缩放 */
        background-position: right; /* 确保图片在单元格内居中显示 */
        opacity: 0.5; /* 设置图标透明度 */
    }

    .fixed-table-container thead th .desc{
        background-image: url('/static/img/sort/2.png'); /* 降序图标的路径 */
        opacity: 0.5; /* 当排序激活时，提高图标透明度 */
        height: 35px; /* 设置图片的高度 */
        margin-bottom: -15px;
        line-height: 5px; /* 行高等于容器高度 */
        font-weight: bold;
    }
    .fixed-table-container thead th .asc{
        height: 30px; /* 设置图片的高度 */
        background-image: url('/static/img/sort/3.png'); /* 升序图标的路径 */
        opacity: 0.5; /* 当排序激活时，提高图标透明度 */
        margin-top: -15px;
        line-height: 26px; /* 行高等于容器高度 */
        font-weight: bold;
    }
</style>

效果

 

换了个大图标,(ps:图片来自网络, 比较丑)