0
我正在嘗試創建一個表,用戶可以在其中添加,編輯和刪除元素。我正在使用數據表插件。這是我想要做的tutorial。這裏是我的html代碼:JQuery Datatables添加行
<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代碼:
$(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()
}
}
);
});
});
添加按鈕最終提交形式,而不是打開一個小的形式,其中用戶可以輸入的所有信息。如何使它彈出一個小窗口,就像教程中的「創建新記錄」按鈕打開表單一樣?
,打破了整個代碼,如果最終沒有。一個結束括號和更改函數結束時沒有一個結束括號 – Richard
這個答案實際上確定了問題中的代碼。請檢查發佈的代碼是否相同。 – Owlvark
@Richard,你的代碼有語法錯誤。我也沒有看到代碼中的更改功能。請更新。 – Lian