jQuery Fixed Header and Fixed Column Plugin FixedTable
Last Updated: 2020-06-03 23:53:07
Update Details:Optimized the table width calculation algorithm in the jQuery version
Last Updated: 2017/9/30 11:19:40 PM
Changelog:Fixed a bug where the heights of the fixed columns on both sides could not be calculated in ajax mode when the maxHeight parameter was not provided
fixedTable
jQuery Plugin Mode
jQuery plugin mode means that the table's DOM structure already exists when the page loads, and the data in the table is populated directly by backend languages (Java, PHP, node.js, etc.).
Required resources:
1 2 3 | <link rel="stylesheet" href="css/fixed-table.css" /><script src="jquery-1.11.3.min.js"></script><script src="js/fixed-table.js"></script> |
fixedTable
1 | $(".fixed-table-box").fixedTable() => $(".fixed-table-box") object |
FixedTable only works after calling the fixedTable() method! View demo
getRow
1 | $(".fixed-table-box").getRow(row) => An array containing multiple objects |
row {index, DOM object, jQuery instance} [Required] The row parameter can be a numeric index of a row in the table body or either fixed side column, a DOM object, or a jQuery object. An array is returned regardless of whether the row can be found. The returned array has the following format: View demo
1 2 3 4 5 6 7 | [ { bodyRow: tr,// Rows in the main table body leftFixedRow: tr,// Rows in the left fixed column rightFixedRow: tr// Rows in the right fixed column }] |
addRow
1 | $(".fixed-table-box").addRow(rows) => $(".fixed-table-box") object |
rows {HTML string, DOM object, jQuery instance, function} [Required] If rows is a function, it must return an HTML string, DOM object, or jQuery instance.
The addRow() method is provided to make it easier to dynamically add a row. You can also add a row yourself using JS without calling this method. However, if there are fixed columns on both sides, additional work is required: 1. In addition to adding a row to the main table body, you must also add an identical row to both fixed columns; 2. If the table has no vertical scrollbar and has fixed columns on both sides, you must manually calculate the heights of both fixed columns.
deleteRow
1 | $(".fixed-table-box").deleteRow(rows) => $(".fixed-table-box") object |
rows {HTML string, DOM object, jQuery instance, function} [Required] If rows is a function, it must return an HTML string, DOM object, or jQuery instance.
The deleteRow() method works similarly to the addRow() method. After deleting the specified row from the main table body, the corresponding rows in the fixed columns will also be deleted if they exist, and the heights of the fixed columns will be recalculated. View demo
emptyTable
1 | $(".fixed-table-box").emptyTable(rows) => $(".fixed-table-box") object |
emptyTable() clears all data from the table, including the header. If fixed columns exist, their contents will also be cleared, and their heights will be recalculated.
calFixedColHeight
1 2 | $.calFixedColHeight($(".fixed-table-box")) => $(".fixed-table-box") object$.calFixedColHeight() can be used to calculate the heights of the fixed columns on both sides. |
calFixedTableWidth
1 | $.calFixedTableWidth($(".fixed-table-box")) => $(".fixed-table-box") object |
$.calFixedTableWidth() can be used to calculate the actual width of the table. If the table's parent container has a fixed width while the table width is set to auto, each column will automatically adjust its width, and the maximum displayed table width will be limited to the width of its parent container. To enable horizontal table scrolling, you must set the table width to its actual width.
getScrollWidth
1 2 | $.getScrollWidth() => Scrollbar width$.getScrollWidth() can be used to obtain the width of the browser scrollbar (specifically, the width of the vertical scrollbar). |
isIE
1 2 | $.isIE() => true/false$.isIE() can be used to determine whether the browser is Internet Explorer. |
ajax Asynchronous Mode
ajax mode means that the table's DOM structure is generated entirely dynamically by JS, and the table contents are also populated dynamically by JS.
Required resources:
1 2 3 | <link rel="stylesheet" href="css/fixed-table.css" /><script src="jquery-1.11.3.min.js"></script><script src="js/FixedTable.js"></script> |
Parameter Configuration
wrap{select, DOM, jQuery Object} [Required] [Default: null] The element to which the dynamically generated table should be added
type{string} [Optional] [Default: "row-col-fixed"] The table type. Available values: head-fixed (fixed header), col-fixed (fixed columns), row-col-fixed (fixed columns with horizontal scrolling)
fields{Array} [Required] [Default: []] The table headers. This parameter must be an array containing n objects. The details of each object are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | [{ class: "", // Class to be added to the column width: "150px", // Column width /* The value displayed in the column. field can be a regular string. When field is a regular string, a th element will be generated automatically and assigned the value of field. To make the table header more flexible, field can also contain HTML code. When field contains HTML code, htmlDom must be set to true. */ field: "Date", /* htmlDom indicates whether the passed field is an HTML string. If htmlDom is true, the value of field is an HTML string. When htmlDom is true, parameters such as class, width, and fieldId will be ignored. */ htmlDom: false, fieldId: , // ID of the current column fixed: false, // Whether the current column is fixed fixedDirection: "" // If the column is fixed, specifies whether it is positioned on the left or right. Available values: left, right. Default: left }] |
extraClass{string} [Optional] [Default: ""] Additional class to be added to the table
hoverClass{string} [Optional] [Default: "rowHover"] Class added to each table row when the mouse pointer moves over it. This class is removed when the mouse pointer leaves the row.
maxHeight{number} [Optional] [Default: 0] Sets the maximum height of the fixed columns on both sides of the table. After setting the maximum height, the fixed columns can scroll vertically along with the main table content. The value must be a number. If this parameter is omitted, the height is calculated automatically.
tableDefaultContent{HTML string, DOM, jQuery Object} [Optional] [Default: ""] Default content displayed before table data is added
onHover{Function} [Optional] [Default: function (){}] Function executed when the mouse pointer moves over each table row
init{function} [Optional] [Default: function (){}] Function executed after table initialization is complete
addRow
1 | new FixedTable({...}).addRow(rows) => Current FixedTable instance object |
rows {HTML string, DOM object, jQuery instance, function} [Required] If rows is a function, it must return an HTML string, DOM object, or jQuery instance.
The addRow() method dynamically adds one or more rows to the table. If the table has fixed columns, corresponding rows will also be added to those columns, and their heights will be recalculated.
deleteRow
1 | new FixedTable({...}).deleteRow(rows) => Current FixedTable instance object |
rows {HTML string, DOM object, jQuery instance, function} [Required] If rows is a function, it must return an HTML string, DOM object, or jQuery instance.
The deleteRow() method works similarly to the addRow() method. After deleting the specified row from the main table body, the corresponding rows in the fixed columns will also be deleted if they exist, and the heights of the fixed columns will be recalculated. View demo
getRow
1 | new FixedTable({...}).getRow(row) => An object |
row {index, DOM object, jQuery instance} [Required] The row parameter can be a numeric index of a row in the main table body or either fixed side column, a DOM object, or a jQuery object. An object is returned regardless of whether the specified row can be found. The returned object has the following format: View demo
1 2 3 4 5 | { bodyRow: tr,// Rows in the main table body leftFixedRow: tr,// Rows in the left fixed column rightFixedRow: tr// Rows in the right fixed column} |
empty
1 | new FixedTable({...}).empty(rows) => Current FixedTable instance object |
emptyTable() clears all data from the table, including the header. If fixed columns exist, their contents will also be cleared, and their heights will be recalculated.