bootstrap对表格datatable的应用

本文介绍如何使用Datatables.net优化长表格的展示效果,包括实现响应式布局、支持搜索及分页等功能。通过实例展示了如何解决动态添加数据时的格式问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接上一篇文章,做好表格后的效果图:


问题是表格过长,而且未来还有可能增加更多的显示。怎么做才能更好的展示呢?

bootstrap里有一个advance table的一个东西,官方范例使用:https://datatables.net/

使用后的效果:



可以看到最大的优点是有了可折叠的表框,支持缩放。同时还能控制页数、支持搜索。真的很棒

这里分享一个在使用中遇到的问题:

这个表单的优化很好做,就是事先有一个表单,然后在js里加上这一句话就好:

 <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
    });
    </script>  
但是,我是动态的往表格里写入数据。并不是一个提前就做好的静态表。所以新加入的数据的行并没有更改格式。一开始我以为问题是出在这句话
$(document).ready(function()

因为这个的意思是等组件都加载完成后再执行。所以改到了添加数据的后面。还是不行。

可能我这个并不是完美的解决方法吧,但是这样做确实解决了问题:

1.表格里需要最少需要一组静态数据,不能完全空,为了好看可以将这个数据隐藏。

 <tr class="gradeX" style="display:none"> 
	   <td>test</td>
           <td>CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td>5</td> 
           <td>0</td> 
           <td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td> 
           <td>lastest</td> 
           <td>lastest</td> 
          </tr> 

2.在新增数据后再单独调用函数,把整个table的style更改。

<script>
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:	
			//alert(xhttp.responseText);
			var note=JSON. parse(xhttp.responseText);
			for(var key in note){
					var table = document.getElementById("TITANRelease");
					var tr = table.insertRow(1);
					var date=new Date();
					tr.insertCell(0).innerText=note[key].time;
					tr.insertCell(1).innerText=note[key].TITANRelease;
					tr.insertCell(2).innerText=note[key].RAPCell;
					tr.insertCell(3).innerText=note[key].multiRAP;
					tr.insertCell(4).innerText=note[key].titanmain;
					tr.insertCell(5).innerText=note[key].oam;
					tr.insertCell(6).innerText=note[key].redis;	
					tr.insertCell(7).innerText=note[key].iphyUte;					
				}
			addTR();
			}
			
		};
		xhttp.open("GET", "http://10.140.160.64:3000/servers/titan-releases", true);
		xhttp.send();
	function addTR(){
	                         $('#TITANRelease')
				.addClass( 'nowrap' )
				.dataTable( {
					responsive: true,
					columnDefs: [
						{ targets: [-1, -3], className: 'dt-body-right' }
					]
				} );
	}

这里我把更改table样式的方法单独封装,在每次取出数据,并创好tr并加入table之后,最后在调用它。

使用之后除了多了一组无用的数据外,这个 表格自带的排序、搜索、分页都可以使用,目前没有发现bug。

Datatable 简单的基本配置

$(document).ready(function() {
    $('#example').dataTable({
"sScrollX""100%",   //表格的宽度
  "sScrollXInner""110%",   //表格的内容宽度
  "bScrollCollapse"true,  //当显示的数据不足以支撑表格的默认的高度时,依然显示纵向的滚动条。(默认是false) 
"bPaginate"true,  //是否显示分页
  "bLengthChange"true,  //每页显示的记录数
  "bFilter"true//搜索栏
  "bSort"true//是否支持排序功能
  "bInfo"true//显示表格信息
  "bAutoWidth"false,  //自适应宽度
  "aaSorting": [[1, "asc"]],  //给列表排序 ,第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
  "aoColumns": [
      null,
      null,
      {
          "bVisible"true//不可见
          "bSearchable"false//参与搜索
      },
      null,
      null
  ], //列设置,表有几列,数组就有几项
   "bStateSave"true//保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
  "sPaginationType""full_numbers"//分页,一共两种样式,full_numbers和two_button(默认)
  "oLanguage": {
      "sLengthMenu""每页显示 _MENU_ 条记录",
      "sZeroRecords""对不起,查询不到任何相关数据",
      "sInfo""当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
      "sInfoEmtpy""找不到相关数据",
      "sInfoFiltered""数据表中共为 _MAX_ 条记录)",
      "sProcessing""正在加载中...",
      "sSearch""搜索",
      "sUrl"""//多语言配置文件,可将oLanguage的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt
      "oPaginate": {
          "sFirst":    "第一页",
          "sPrevious"" 上一页 ",
          "sNext":     " 下一页 ",
          "sLast":     " 最后一页 "
      }
  }, //多语言配置
 "bJQueryUI"false//可以添加 jqury的ui theme  需要添加css
       "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条""每页25条""每页50条""显示所有数据""不显示数据"]]  //设置每页显示记录的下拉菜单
    });
});

直接调用默认的设置

$('#example').dataTable();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值