how to use datatables editor
Basic initialisation
Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that provides the ability to easily add, edit and delete rows on a database that is displayed by a DataTable. Editor provides a clean and responsive interface for end user manipulation of data, an expressive API for complete control and a well defined server communications protocol for data submission.
This simple example shows a table with seven fields, each of which can be edited as plain text. In other examples we will explore how to add date pickers, select
elements and other controls to make form input intuitive for the system user, among many other aspects of the Editor API.
- https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
- https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css
- https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css
- ../../extensions/Editor/css/editor.dataTables.min.css
<
table
id
=
"example"
class
=
"display"
cellspacing
=
"0"
width
=
"100%"
>
<
thead
>
<
tr
>
<
th
>Name</
th
>
<
th
>Position</
th
>
<
th
>Office</
th
>
<
th
>Extn.</
th
>
<
th
>Start date</
th
>
<
th
>Salary</
th
>
</
tr
>
</
thead
>
<
tfoot
>
<
tr
>
<
th
>Name</
th
>
<
th
>Position</
th
>
<
th
>Office</
th
>
<
th
>Extn.</
th
>
<
th
>Start date</
th
>
<
th
>Salary</
th
>
</
tr
>
</
tfoot
>
</
table
>
var
editor;
// use a global for the submit and return data rendering in the examples
$(document).ready(
function
() {
editor =
new
$.fn.dataTable.Editor( {
ajax:
"../php/staff.php"
,
table:
"#example"
,
fields: [ {
label:
"First name:"
,
name:
"first_name"
}, {
label:
"Last name:"
,
name:
"last_name"
}, {
label:
"Position:"
,
name:
"position"
}, {
label:
"Office:"
,
name:
"office"
}, {
label:
"Extension:"
,
name:
"extn"
}, {
label:
"Start date:"
,
name:
"start_date"
,
type:
"datetime"
}, {
label:
"Salary:"
,
name:
"salary"
}
]
} );
$(
'#example'
).DataTable( {
dom:
"Bfrtip"
,
ajax:
"../php/staff.php"
,
columns: [
{ data:
null
, render:
function
( data, type, row ) {
// Combine the first and last names into a single table field
return
data.first_name+
' '
+data.last_name;
} },
{ data:
"position"
},
{ data:
"office"
},
{ data:
"extn"
},
{ data:
"start_date"
},
{ data:
"salary"
, render: $.fn.dataTable.render.number(
','
,
'.'
, 0,
'$'
) }
],
select:
true
,
buttons: [
{ extend:
"create"
, editor: editor },
{ extend:
"edit"
, editor: editor },
{ extend:
"remove"
, editor: editor }
]
} );
} );
how to use datatables editor的更多相关文章
- datatables editor fields type
其实editor fields type 默认支持的输入类型就是w3c输入框类型. text number password textarea select checkbox ...
- js page click
DataTables Editor Your account: Login / Register Examples Manual Reference Options API Events Butt ...
- datatables中的Options总结(3)
datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...
- datatables中的Options总结(2)
datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...
- Datatables JQuery插件
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...
- Datatables 在asp.net mvc中的使用
前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)
接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...
- JQuery DataTables Editor---只修改页面内容
近来在工作中需要对JQuery DataTables进行增,删,改的操作,在网上找了一些资料,感觉比较的好的就是(http://editor.datatables.net/)文章中所展示的操作方法(如 ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (1)
我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改:2.对应的数据库信息的修改. 前一篇博文介绍了页面级的操作, ...
随机推荐
- Django之学员管理
Django之学员管理 实现-------在前端页面提交的数据,后端可直接写入数据库.在页面实现操作数据库的增删改查. 数据表设计:(三个角色四张表) 班级表: id title 1 花果山国小一年级 ...
- 基本Sql语句汇总
关于Sql语句的学习,选择的DBMS为SQL Server,Sql语句随着工作中的应用不断补充,不具备系统性,为个人笔记汇总,网上有很多优秀的资源,故不对每一处应用做过多细致的说明,后期会对部分篇幅较 ...
- luogu1856 [USACO5.5]矩形周长Picture
看到一坨矩形就要想到扫描线.(poj atantis) 我们把横边竖边分开计算,因为横边竖边其实没有区别,以下论述全为考虑竖边的. 怎样统计一个竖边对答案的贡献呢?答:把这个竖边加入线段树,当前的总覆 ...
- LR性能测试问题解决方法
一.Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set the ...
- N个数求和(模拟)
本题的要求很简单,就是求N个数字的和.麻烦的是,这些数字是以有理数分子/分母的形式给出的,你输出的和也必须是有理数的形式. 输入格式: 输入第一行给出一个正整数N(≤100).随后一行按格式a1/b1 ...
- 谢孟军:The State of Go | ECUG Con 精粹系列
本月 17 日,Go 1.8 版本火热发布.相较于以往的版本,Go 1.8 具体有哪些新的特性呢?想必这是不少 Gopher 们热切关注和讨论的问题.作为著名的Golang 布道者,Gopher Ch ...
- CF671D:Roads in Yusland
n<=300000个点的树,给m<=300000条带权路径(ui,vi,保证vi是ui的祖先)求覆盖整棵树每条边的最小权和. 好题好姿势!直观的看到可以树形DP,f[i]表示把点i包括它爸 ...
- 移动web页面字体大小三
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentEleme ...
- 重装JDK后Tomcat和Eclipse的配置
比如JDK之前是1.8.0_31的,升级之后变成了1.8.0_131之后,Tomcat需要做如下配置: 对于Eclipse中之前配置的Tomcat需要删除后重新添加一个.
- java的计时:毫秒、纳秒
System.currentTimeMillis()获取毫秒值,但是其精度依赖操作系统 想实现较为精确的毫秒,可以采用 System.nanoTime()/1000000L System.nanoTi ...