JQuery Datatables添加行 [英] JQuery Datatables Add Row
本文介绍了JQuery Datatables添加行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建用户可以添加,编辑和删除元素的表。我正在使用数据表插件。以下是我要做的教程。这是我的html代码:
I'm trying to create a table that a user can add, edit, and delete elements in. I'm using the datatables plugin. Here's the tutorial for what I want to do. Here is my html code:
<p><button class="editor_create">Add new person</button></p>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="reg_more" width="100%">
<thead>
<tr>
<th width="30%">First Name</th>
<th width="18%">Last Name</th>
<th width="18%">Phone</th>
<th width="18%">Email</th>
<th width="18%">Ethnicity</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
这里是jquery代码:
And here's the jquery code:
$(document).ready(function(e) {
$('#reg_more').dataTable({
"bLengthChange": false,
"bInfo": false,
"bPaginate": false,
"bStateSave": true,
"rowHeight": 'auto',
"bFilter": true,
"bSort": false,
"bAutoWidth": false,
"aoColumns": [
{ "mDataProp": "First Name" },
{ "mDataProp": "Last Name" },
{ "mDataProp": "Phone" },
{ "mDataProp": "Email", "sClass": "center" },
{ "mDataProp": "Ethnicity", "sClass": "center" },
{
"mDataProp": null,
"sClass": "center",
"sDefaultContent": '<a href="" class="editor_edit">Edit</a>',
"bSortable": false,
"bSearchable": false
},
{
"mDataProp": null,
"sClass": "center",
"sDefaultContent": '<a href="" class="editor_remove">Delete</a>',
"bSortable": false,
"bSearchable": false
}
]
});
}
$("#submit").show();
window.scrollTo(0,document.body.scrollHeight);
});
var editor = new $.fn.dataTable.Editor( {
"domTable": "#reg_more"
} );
//style="display:none;"
//$("#addbtn").click(addrow);
editor.add( [
{
"label": "First Name:",
"name": "fname"
}, {
"label": "Last Name:",
"name": "lname"
}, {
"label": "Phone:",
"name": "phone"
}, {
"label": "Email:",
"name": "email"
}, {
"label": "Ethnicity:",
"name": "ethnicity"
}
] );
$('button.editor_create').on('click', function (e) {
e.preventDefault();
editor.create(
'Add new person',
{
"label": "Add",
"fn": function () {
editor.submit()
}
}
);
} );
$('#reg_more').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit record',
{
"label": "Update",
"fn": function () { editor.submit(); }
}
);
} );
$('#reg_more').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.message( "Are you sure you want to remove this row?" );
editor.remove(
$(this).parents('tr')[0],
'Delete row',
{
"label": "Update",
"fn": function () {
editor.submit()
}
}
);
} );
});
添加按钮最终提交表单,而不是打开一个小窗体,用户可以输入所有内容信息。如何在创建新记录按钮打开窗体的教程中弹出一个小窗口?
The add button ends up submitting the form rather than opening up a small form where the user can input all the information. How do I make it popup a small window like in the tutorial where the "create new record" button opens up a form?
推荐答案
更改此部分:
}
$("#submit").show();
window.scrollTo(0,document.body.scrollHeight);
});
到:
$("#submit").show();
window.scrollTo(0,document.body.scrollHeight);
(删除额外的}
和});
这篇关于JQuery Datatables添加行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文