亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

頁面靜態實現分頁,使用DataTables插件

標簽:
Java JavaScript

1.引入js
图片描述
2、DataTables的默认配置

$(document).ready(function() {
$('#example').dataTable();// #example对应表格的id
} );
<!-- 若是弹出localhost的弹出框信息,原因可能是表格数据有问题,若自己控制有无数据,则需删掉暂无数据的字样-->

通用样式

$('.table-sort').dataTable({
        "aaSorting": [[ 0, "asc" ]],//默认第几个排序(序号从0开始)
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
          //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
          {"orderable":false,"aTargets":[1,2,3,4,5]}// 制定列不参与排序
        ]
    });

2、DataTables的一些基础属性配置
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度

不显示默认排序的列,需要在数据的最前面设一个隐藏的列
图片描述

对table表格的数据使用手动排序的功能时,要加<thead>和<tbody>标签,<thead>标签是表格标题的内容,<tbody>标签放的是数据的内容

點擊查看更多內容
4人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
JAVA開發工程師
手記
粉絲
57
獲贊與收藏
437

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消