DataTable是一款非常流行的數(shù)據(jù)表格插件，可以實現(xiàn)各種各樣的表格功能。其中，凍結(jié)列（Fixed Columns）是一項非常實用的功能，可以讓表格的左側(cè)列在水平滾動時保持不動。本文將介紹如何使用jQuery DataTable實現(xiàn)該功能。
//加載DataTable插件庫和CSS文件//初始化DataTable，設(shè)置凍結(jié)左側(cè)兩列
$(document).ready(function() {
var table = $('#example').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2
}
});
});
//HTML代碼| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
|---|---|---|---|---|---|---|---|---|---|
| Row 1 Data 1 | Row 1 Data 2 | Row 1 Data 3 | Row 1 Data 4 | Row 1 Data 5 | Row 1 Data 6 | Row 1 Data 7 | Row 1 Data 8 | Row 1 Data 9 | Row 1 Data 10 |
| Row 2 Data 1 | Row 2 Data 2 | Row 2 Data 3 | Row 2 Data 4 | Row 2 Data 5 | Row 2 Data 6 | Row 2 Data 7 | Row 2 Data 8 | Row 2 Data 9 | Row 2 Data 10 |
如上所示，我們只需要在初始化DataTable時添加fixedColumns屬性，并指定leftColumns的值為需要凍結(jié)的列數(shù)即可。另外，還需要加載fixedColumns插件的CSS和JavaScript文件。