html表头和左侧固定js,固定表头jquery datatable的使用与定制

偏执的太偏执、 2022-10-06 04:52 5阅读 0赞

jquery datatable的固定表头的官方文档

https://datatables.net/extensions/fixedcolumns/

一、使用

1.引用3个js与2个css

2.数据生成普通的table标签，例:

First nameLast name

TigerNixon

3.文档加载完毕后将2的table与jquery dataTables绑定

$(document).ready(function() \{

var table = $(’\#example’).DataTable( \{

scrollY: "300px",

scrollX: true,

scrollCollapse: true,

paging: false

\} );

new $.fn.dataTable.FixedColumns( table, \{

leftColumns: 1,

rightColumns: 1

\} );

\} );

二 定制

1.固定第一行，最左行等配置

A.固定第一行,超过300px出垂直滚动条

scrollY:        "300px",

B.宽度超长出水平滚动条

scrollX:        true,

C.固定最左行

leftColumns: 1,

2.table样式

th, td \{ white-space: nowrap; \}

div.dataTables\_wrapper \{

width: 800px;

margin: 0 auto;

\}

如上代码,空格不换行，宽度等。这些还要与自己项目的样式调合，这是最主要的工作量。

另外官方文档中demo最左列与正文的行有1,2像素没对齐，还需再研究。

三 boostrap datatable设置行样式:

function rowStyle(row, index)\{

//bookState是ajax返回的状态值

let bookState=row.bookState;

if (bookState!=undefined && bookState == "1" ) \{

/\*return \{css: \{'color': 'gray'\}\};\*/

return \{classes:'gray-bg-ignor'\};

\}

return \{\};

\}表格html与js:

data-search="true" data-url="http://image.highersoft.net/data.json"

data-side-pagination="server" data-row-style="rowStyle" class=" xhe-border">

IDItem NameItem Price

另外还有一个不用插件的方案：http://www.highersoft.net/html/notice/notice\_596.html

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 html table 固定表头和列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

分手后的思念是犯贱/ 2024年04月17日 05:34/ 0 赞/ 116 阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 178 阅读

相关 js、css 实现table表头固定

![20191208173647300.png][] <div id='table-cont' style="max-height: 150px;width:

朴灿烈づ我的快乐病毒、/ 2023年06月20日 06:21/ 0 赞/ 54 阅读

相关 Table固定列和表头

一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表

灰太狼/ 2023年05月29日 09:28/ 0 赞/ 76 阅读

相关 java 表头固定_常用的固定表头的几种做法

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：第一种感觉最简单的就是分放在两个标签里，这样只控制不含有标题的那个，代码如下: <table>

本是古典何须时尚/ 2022年11月12日 02:49/ 0 赞/ 280 阅读

相关 html表头和左侧固定js,固定表头jquery datatable的使用与定制

jquery datatable的固定表头的官方文档 https://datatables.net/extensions/fixedcolumns/ 一、使用 1.引用3

偏执的太偏执、/ 2022年10月06日 04:52/ 0 赞/ 6 阅读

相关 html表头固定原理,表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表

小灰灰/ 2022年10月05日 12:57/ 0 赞/ 290 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

た入场券/ 2022年07月12日 06:25/ 0 赞/ 246 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

- 日理万妓/ 2022年07月12日 06:25/ 0 赞/ 249 阅读

相关 jquery 表格表头固定，表格滚动 ------gxy

实现了表头固定，表身滚动： -------------------- <div id="scroll_table" class="col-md-12 bottom_

约定不等于承诺〃/ 2022年05月28日 00:21/ 0 赞/ 436 阅读