正文 

当前位置： 首页 > 开发 > java教程

datatables表格固定栏使用方法(代码片段)

前端[色色] 前端[色色]     2022-11-13     106

关键词：

有时候数据过多，为了用户体验，需要将重要的栏目固定不动，如下图所示：

从上图我们可以看出，表格滚动的时候，左边5栏是不动的。现在说一下实现方法：

插件地址：

https://datatables.net/

 

使用方法：

wageTable为表格的ID。
var table = $(\'#wageTable\').DataTable( 
    scrollX: true,
    scrollCollapse: true,
    paging: false, //不用分页
    info: false, //隐藏表格底部信息
    ordering: false, //隐藏排序
    searching: false, //隐藏搜索栏
    fixedColumns:   
        leftColumns: 5 //左侧要固定的栏目数，如果右侧需要固定可以用 rightColunms
    ,
    language: 
        sEmptyTable: "暂无数据", //没数据时的提示文字定义为中文，默认是”No data available in table“
    
);

 

更多左右2边固定例子可访问：https://datatables.net/extensions/fixedcolumns/examples/

参数具体的用法及含义可访问：https://datatables.net/reference/option/

更多dataTable英文信息替换成中文:

$(\'#wageTable\').DataTable(
    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": ": 以降序排列此列"
        
    
);

 

使用jquery开发datatable分页表格插件(代码片段)

...了手风琴、选项卡，今天和大家介绍一下这个datatable分页表格插件。　　我们先讲解使用，再分析插件的实现方式。 1、引入jquery库和插件库、css 查看详情

css使用固定导航修复wp管理栏(代码片段)

查看详情

datatables的使用(代码片段)

Databases是一款基于JQuery的表格插件，主要用来优化table，支持表格分页、搜索、排序、显示条数、异步加载等众多好用的功能项目地址：https://datatables.net/基本使用需要用到的JS和CSS文件位于项目代码下的media目录中，需要将这个... 查看详情

实现datatables搜索框查询结果高亮显示(代码片段)

DataTables是封装好的HTML表格插件，丰富了HTML表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。关于DataTables的更多信息，请... 查看详情

datatable使用介绍(代码片段)

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。1、支持分页：前台分页和后台分页前台分页：后台一次把数据传过来，交给前端渲染。缺点：初次渲染时间长；优点：渲染完成... 查看详情

DataTables 使用 Bootstrap 4 条带表固定列透明

...3114:20:00【问题描述】：在DataTables示例here中，当向左滚动表格时，固定单元格在深色行上是透明的。这是一个与BS4或DataTables相关的错误。如果是这样，是否有解决方法来纠正它？【问题讨论】 查看详情

滚动表格固定表头和左边栏

效果如下：思路：　　在表格外面套一个相对定位标签，　　在该标签内再复制两个绝对定位的表格，一个作为固定头部，一个作为固定左边栏，　　再在该标签内添加一个放在左上角的标签，宽高与第一个td相同　　当表格滚... 查看详情

javascriptgoogleapps脚本的图表服务使用datatable对象作为可视化和表格的源数据。有一个内置的方法tha(代码片段)

查看详情

layui之datatable组件v1.0(父子表管理传值/数据表格与select&laydate结合等)(代码片段)

目录layUI之DataTable数据表格组件V1.0概述一、下载与引用二、组件功能介绍三、父表格渲染四、子表弹出渲染五、父表增/删/改/查六、其他特色功能七、最后说点啥layUI之DataTable数据表格组件V1.0概述?公司项目中对于表格操作的要... 查看详情

七种实现左侧固定，右侧自适应两栏布局的方法(代码片段)

总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。关于最终的效果，可以查看这里常用... 查看详情

css避免管理栏与固定菜单栏重叠(代码片段)

查看详情

html固定的bootstrap导航栏(代码片段)

查看详情

javascript控件：一个好用的表格（分页实例）(代码片段)

一、官网https://datatables.net/二、引用<scriptsrc="bower_components/datatables.net/js/jquery.dataTables.min.js"></script><scriptsrc="bower_components/datatables.net-bs/js/dataTables.bootstrap.m 查看详情

css创建三栏布局（两侧宽度固定，中间宽度自适应）的几种方法(代码片段)

方法1：使用flex<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>Document</title><style>.condisplay:flex;.leftbackgrou 查看详情

javascript具有固定宽度和内部滚动的mui-datatable，也是行上的分页和标签。(代码片段)

查看详情

scss表格布局：固定zetdebreedtesgelijk。(代码片段)

查看详情

css固定导航栏标题内的颜色更改徽标(代码片段)

查看详情

css手写一个表头固定(代码片段)

Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情