jQuery Datatable jEditable刷新页面
jQuery Datatable jEditable refreshing the page
我正在使用 jQuery 数据table 和 Jeditable 插件来编辑我的 table 的第一列。 Jeditable 工作正常,它更新数据库 table 并在 table 上显示编辑后的值,但它仅在刷新页面后才会这样做。我希望在不刷新页面的情况下更新它。这是我的代码:
JavaScript
$(document).ready(function()
{
var objTable = $(".example").DataTable(
{
"info": false,
"scrollCollapse": true,
"paging": false,
"order": [[ 1, "asc" ]]
});
$( '.edit' ).each( function()
{
$( this ).editable( 'UpdateDBTableURL',
{
'width' : '90%',
'height' : '80%',
'tooltip' : 'Click to Edit',
submit : 'Save',
cancel : 'Cancel',
cssclass : "editable",
'submitdata' :
{
'sCompanyID': CompanyID,
'sAction': 'EditLabel'
},
'onClick' : 'submit'
} );
} );
});
HTML 代码
<table class="example" width="100%">
<thead>
<tr>
<th>Label</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="edit" id="101"> </td>
<td>Mary Kom</td>
<td>2401 N Main St</td>
</tr>
<tr>
<td class="edit" id="102"></td>
<td>David Kom</td>
<td>2401 N Main St</td>
</tr>
</tbody>
</table>
您可能需要对此进行微调,但我使用数据表 createRow 函数在构建行时添加了 jedit。
$(document).ready(function () {
var objTable = $(".example").DataTable(
{
"info": false,
"scrollCollapse": true,
"paging": false,
"order": [[1, "asc"]],
"createdRow": function (row, data) {
$(row).children(":nth-child(1)").editable('UpdateDBTableURL',
{
'width': '90%',
'height': '80%',
'tooltip': 'Click to Edit',
submit: 'Save',
cancel: 'Cancel',
cssclass: "editable",
'submitdata':
{
'sCompanyID': CompanyID,
'sAction': 'EditLabel'
},
'onClick': 'submit'
});
}
});
});
我正在使用 jQuery 数据table 和 Jeditable 插件来编辑我的 table 的第一列。 Jeditable 工作正常,它更新数据库 table 并在 table 上显示编辑后的值,但它仅在刷新页面后才会这样做。我希望在不刷新页面的情况下更新它。这是我的代码:
JavaScript
$(document).ready(function()
{
var objTable = $(".example").DataTable(
{
"info": false,
"scrollCollapse": true,
"paging": false,
"order": [[ 1, "asc" ]]
});
$( '.edit' ).each( function()
{
$( this ).editable( 'UpdateDBTableURL',
{
'width' : '90%',
'height' : '80%',
'tooltip' : 'Click to Edit',
submit : 'Save',
cancel : 'Cancel',
cssclass : "editable",
'submitdata' :
{
'sCompanyID': CompanyID,
'sAction': 'EditLabel'
},
'onClick' : 'submit'
} );
} );
});
HTML 代码
<table class="example" width="100%">
<thead>
<tr>
<th>Label</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="edit" id="101"> </td>
<td>Mary Kom</td>
<td>2401 N Main St</td>
</tr>
<tr>
<td class="edit" id="102"></td>
<td>David Kom</td>
<td>2401 N Main St</td>
</tr>
</tbody>
</table>
您可能需要对此进行微调,但我使用数据表 createRow 函数在构建行时添加了 jedit。
$(document).ready(function () {
var objTable = $(".example").DataTable(
{
"info": false,
"scrollCollapse": true,
"paging": false,
"order": [[1, "asc"]],
"createdRow": function (row, data) {
$(row).children(":nth-child(1)").editable('UpdateDBTableURL',
{
'width': '90%',
'height': '80%',
'tooltip': 'Click to Edit',
submit: 'Save',
cancel: 'Cancel',
cssclass: "editable",
'submitdata':
{
'sCompanyID': CompanyID,
'sAction': 'EditLabel'
},
'onClick': 'submit'
});
}
});
});