Datatables根据移动端屏幕大小动态隐藏显示表列

最新推荐文章于 2024-06-13 10:58:11 发布

zzzzaj2012

最新推荐文章于 2024-06-13 10:58:11 发布

阅读量1.9k

点赞数

分类专栏： datatables

本文链接：https://blog.csdn.net/zzzzaj2012/article/details/82796882

版权

datatables 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Datatables 在移动端显示时，有时会因为数据表的列数多，列的内容长，而变长表或自动换行，不利于显示。
利用Datatables的列隐藏功能，根据移动端屏幕大小动态隐藏、显示部分表列的形式，将主要内容显示出来。

//老版本的是dataTable，头一字母为小写d，新版为大写D
oTable_Main=$('#example').DataTable( {
    ...
    ...
    ...
    ...,
    initComplete: function () {
			switch (true) {		//根据屏幕大小显示相关列
				case demoWidth<=360 :	//demoWid，屏幕宽xxxpx像素
					this.api().columns( [1,4] ).visible( false );
					break;
				case demoWidth>360 && demoWidth<=720:
					this.api().columns( [4] ).visible( false );
					break;
				case demoWidth>720 && demoWidth<=1024:
					this.api().columns( [1,5] ).visible( false );
					break;
				default:
					this.api().columns( [5] ).visible( false );
			}
		}