前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery dataTable 的学习之初始化插件(一)

jquery dataTable 的学习之初始化插件(一)

作者头像
OECOM
发布2020-07-02 11:24:49
1.1K0
发布2020-07-02 11:24:49
举报
文章被收录于专栏:OECOM

最近用到了一个比较实用的jquery插件--jquery dataTable,这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:

  1. 自动分页处理
  2. 即时表格数据过滤
  3. 数据排序以及数据类型自动检测
  4. 自动处理列宽度
  5. 可通过CSS定制样式
  6. 支持隐藏列
  7. 易用
  8. 可扩展性和灵活性
  9. 国际化
  10. 动态创建表格
  11. 免费的

一 、简单的初始化使用

首先是html部分的代码,需要先构建一个html的table表格

代码语言:javascript
复制
<table id="example">
	<thead>
		<tr>
			<th>列1</th>
			<th>列2</th>
			<th>列3</th>
			<th>列4</th>
			<th>列5</th>
			<th>列6</th>
			<th>列7</th>
			<th>列8</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据1</td>
			<td>数据2</td>
			<td>数据3</td>
			<td>数据4</td>
			<td>数据5</td>
			<td>数据6</td>
			<td>数据7</td>
			<td>数据8</td>
		</tr>
	</tbody>
</table>

然后是在js中初始化表格控件(前提是引入dataTable的js文件)

代码语言:javascript
复制
$(document).ready(function() { 
$('#example').dataTable(); 
} );

这样,一个基本的表格框架就一个构建好了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-12-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一 、简单的初始化使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档