毫无疑问,我们都爱jQuery的。创建简单的表是2006年如此。在本教程中我将告诉你如何使用数据表和Jeditable jQuery插件创建简单的真棒表。让我们先检查出的特点。
- 与分页飞表
- 排序和搜索数据
- 编辑表格内的数据的能力
- 保存在cookie中的表状态
注:我总是试 图用我的代码实现以下。
- 易于理解
- 代码注释
- 正确格式化
首先,我们会先看看我们的表结构看起来像这样,它是按要求的DataTable插件。表中的数据可以从数据库中来,或可以手动feeded的。看看下面的HTML代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<表类= “表” ID = “名人” >
<THEAD>
<TR>
<TH> ID </次>
<TH> 名称</ TH>
<TH> 弹头</ TH>
<TH> 更新</ TH>
<TH> </ TH>
</ TR>
</ THEAD>
<TBODY>
名词< = “1” >
TD 类= “隐藏手机” > </ TD>
TD 类= “编辑” > 林赛罗翰</ TD>
TD 类= “编辑隐藏手机” > lindsay_lohan </ TD>
<TD 类= “隐藏手机” > 2013-08-29T11:49:32 +02:00 </ TD>
<TD> <A HREF = “JavaScript的:” ID = “删除1” = “删除无下划线” > 所述</ A> </ TD>
</ TR>
<TR ID = “2” >
TD 类= “隐藏手机” > </ TD>
<TD 类= “编辑” > 希拉里·达芙</ TD>
TD 类= “编辑隐藏手机” > hilary_duff </ TD>
<TD 类= “隐藏手机” > 2013-08-29T11:49:16 +02:00 </ TD>
<TD> <A HREF = “JavaScript的:” ID = “删除” 类= “删除无下划线” > 所述</ A> </ TD>
</ TR>
<TR = “3” >
TD 类= “隐藏手机” > </ TD>
TD 类= “编辑” > 奥利维亚芒恩</ TD>
<TD 一流= “编辑隐藏手机” > olivia_munn </ TD>
<TD 类= “隐藏手机” > 2013-08-28T23:53:00 +02:00 </ TD>
<TD> <A HREF = “JavaScript的:” ID = “删除” 类= “删除无下划线” > 所述</ A> </ TD>
</ TR>
</ TBODY>
</ TABLE>
|
这是必要的,指定<THEAD> </ THEAD和<TBODY> </ TBODY>标签THEAD表格标题和TBODY表体,这是我们的内容。 我已经给每个TR自己的ID时需要AJAX请求,让我们知道哪些内容需要更新或删除。让我们来看看下面的jQuery代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<脚本类型= “文/ JavaScript的” SRC = “JS / jquery.datatables.js的” > </ SCRIPT>
<脚本类型= “文/ JavaScript的” SRC = “JS / jquery.jeditable.js” > </ SCRIPT>
<脚本类型= “文/ JavaScript的” SRC = “JS / jquery.blockui.js的” > </ SCRIPT>
<脚本类型= “文/ JavaScript的” >
$ (文件)。就绪(函数() {
表 = $ (“#名人” );
VAR oTable = 表。的dataTable ({ “sPaginationType” “full_numbers” , “bStateSave” : 真正的} );在
$ (“编辑” , oTable fnGetNodes ())编辑(“PHP / ajax.php?R = edit_celeb” , {
“回调” : 功能(sValue Ÿ ) {
var目录 取 = sValue 分割(“,” );
VAR APOS = oTable fnGetPosition中;
oTable fnUpdate 取[ 1 ] , APOS [ 0 ] , APOS [ 1 ] );
}
的“submitdata” 功能(值 设置) {
返回 {
的“ROW_ID” : parentNode 的getAttribute (“ID” ),
“塔” : oTable fnGetPosition (当前)[ 2 ]
} ;
}
“高度” : “14px的”
} );
$ (文件)上(“咔嚓” , “删除” , 函数() {
VAR celeb_id = ATTR (“ID” )。替换(“删除” , “” );
父 = $ (“#” + celeb_id );
$ 阿贾克斯({
类型: “得到” ,
网址: “PHP / ajax.php?R = delete_celeb&ID =” + celeb_id
包括: “
beforeSend: 函数() {
表块({
消息: “
CSS: {
边框: “没有” ,
背景颜色: “没有”
}
overlayCSS: {
背景颜色: #FFF“ ,
不透明度:
光标: “等待”
}
} );
}
成功: 函数(响应) {
表疏通();
var目录 = 响应。分割(“,” );
([ 0 ] == “成功” ) {
$ (母公司)淡出(200 ,() {
元(母公司)。删除();
} );
}
}
} );
} );
} );
</ SCRIPT>
|
初始化表[ID =“名人”]的DataTable插件后,我们在上面的js代码,然后移动到增加的内嵌编辑功能表安装jeditable插件。我已经加入编辑类编辑需要的表上的所有TD元素。下面的代码提取重视jeditable的插件编辑类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$ (“编辑” , oTable fnGetNodes ())编辑(“PHP / ajax.php?R = edit_celeb” , {
“回调” : 功能(sValue Ÿ ) {
var目录 取 = sValue 分割(“,” );
VAR APOS = oTable fnGetPosition中;
oTable fnUpdate 取[ 1 ] , APOS [ 0 ] , APOS [ 1 ] );
}
的“submitdata” 功能(值 设置) {
返回 {
的“ROW_ID” : parentNode 的getAttribute (“ID” ),
“塔” : oTable fnGetPosition (当前)[ 2 ]
} ;
}
“高度” : “14px的”
} );
|
此代码将使我们能够得到内联编辑功能表。将修改后的文本作为一个AJAX请求在代码中指定的文件。“ajax.php”文件,在我们的例子中。此请求将包含修改后的文本,行ID(记住,在开始我们谈到这个),和列数(所以我们知道哪些数据需要进行编辑)。
我不打算在这里,因为我们没有做任何事情,在该文件中触摸ajax.php代码。在一个理想的情况下,我们将执行SQL查询,在该文件中,并把结果返回给页面。
所以,这是所有与jQuery的一部分。我建议你退房的演示完全并尝试了所有的功能,看看如何提高表比平常。大家有一个锻炼。我特意离开了原因不明的代码的一部分。你能找出哪一部分是吗?我在等待着你的回应意见。
本文来自李新的博客,转载请注明出处。http://www.ilixin.net/399.html
相关推荐
jquery 插件DataTable 最新版本下载
JQuery DataTable中文文档API.chm中文API,版本:JQuery DataTable中文文档API.chm,解压即食,
jquery datatable
Jquery dataTable API 中文文档 word版 好用实在
JQuery DataTable 插件 V2.0,网上看到的,觉得不错就上传上来,供大家一起共同分享学习。
jquery的DataTable
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
基于jQuery的强大的表格插件 dataTable 压缩文件 是dataTable的官方文件 详细资料是我找的一些第三方说明资料
vue3.0+typescript通过npm管理包,然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart,具体界面请看:https://blog.csdn.net/sunxiaoju/article/details/109401288
jquery.dataTable.js资源下载,基于jquery的前端表格插件,表格插件下载,datatable下载
介绍 JQuery DataTable 插件 JQuery DataTables 插件是一个出色的客户端插件,它增强了客户端 HTML 表格并添加了各种功能,例如分页、过滤、排序等。它还具有良好的 API,允许您自定义插件,例如在标题中添加单独的...
分两个部分,第一个部分前台分页、排序、检索等。 第二个部分,我实现了后台分页,排序,但是检索没能实现。
editable_datatable jQuery DataTables的插件以启用内联编辑基本用法 $ ( '#my-table' ) . DataTable ( ) . editable_table ( ) ;选项beforeEditStart 在开始编辑行之前调用了回调。 执行顺序为: 用户单击一行进行...
js-datatable-具有数据可视化的动态表js-datatable是一个开放源代码的JQuery插件,用于生成具有数据可视化功能的动态HTML表。 该插件最初是为满足学术数据可视化( )的需要而开发的,并与静态页面生成框架一起使用...
jquery datatable api chm 中文
本程序员源码经调试通过,可以支持Datatable插件数据导出成Excel文件,可以应用于一般的WEB应用程序的开发
用于 jQuery 的 DataTables 表格插件 安装 安装此扩展的首选方法是通过 。 要么跑 php composer.phar require --prefer-dist tejrajs/yii2-datatable "dev-master" 或添加 "tejrajs/yii2-datatable": "dev-master...