table中的tbody标签

写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的,每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。
thead用来放标题之类的东西

tbody放数据本体

tfoot放表格的脚注之类……

标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头
tbody表格的身体
tfoot表格的脚)
TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。
TBody与THead和TFoot在表格中形成三个“块”,THead指明表格的Head部分,TFoot指明表格的脚注部分。而TBody则指明表格的主体部分。
比如:
< TABLE >  
  
< THEAD >  
    
< TR >  
      
< TD >  
        This text is in the THEAD. 
      
</ TD >  
    
</ TR >  
  
</ THEAD >  
  
< TBODY >  
    
< TR >  
      
< TD >  
        This text is in the TBODY. 
      
</ TD >  
    
</ TR >  
  
</ TBODY >  
  
< TFOOT >  
    
< TR >  
      
< TD >  
        This text is in the table footer. 
      
</ TD >  
    
</ TR >  
  
</ TFOOT >  
</ TABLE >  

 

  用TBODY这个标签可以控制表格分行下载,可以让其中的内容比网页中别的东东(如图片)先下载下来,这样可以让别人先看到网页的实质性的内容,不用等那么久了,在需要分行下载处加上<tbody>和</tbody>,比如:</P><P><table>
<tbody>
<tr><td>飞鸥岛</td></tr>
<tr><td>飞鸥岛</td></tr>
</tbody>
<tbody>
<tr><td>飞鸥岛</td></tr>
<tr><td>飞鸥岛</td></tr>
</tbody>
</table>

在Bootstrap3,分页通常使用jQuery插件来实现。常用的插件有Bootstrap Paginator、Bootstrap Pager和Bootstrap Table等。 如果是在tbody标签进行分页,可以使用Bootstrap Table插件。该插件提供了丰富的表格操作功能,包括分页、排序、搜索、导出等。 使用Bootstrap Table插件的步骤如下: 1. 引入相关的CSS和JS文件 ``` <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <script src="//cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script> ``` 2. 在HTML定义表格 ``` <table id="table"></table> ``` 3. 使用jQuery初始化表格 ``` $(function() { $('#table').bootstrapTable({ url: 'data.json', // 数据来源 pagination: true, // 是否分页 pageSize: 10, // 每页显示的记录数 pageNumber: 1, // 当前页码 search: true, // 是否显示搜索框 columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { field: 'price', title: '价格' }] }); }); ``` 4. 在服务器端生成分页数据 在服务器端生成的数据需要包含分页相关的信息,如总记录数、当前页码、每页记录数等。可以使用类似以下的JSON格式: ``` { "total": 100, // 总记录数 "rows": [{ // 当前页的数据 "id": 1, "name": "商品1", "price": 100 }, { "id": 2, "name": "商品2", "price": 200 }, { "id": 3, "name": "商品3", "price": 300 }] } ``` 以上就是使用Bootstrap Table插件实现tbody标签数据分页的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值