删除的行会在添加新行数据表时出现 [英] Deleted Rows appear back upon adding new row DataTables
本文介绍了删除的行会在添加新行数据表时出现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var counter = 1
$（'＃addRow'）。on（'click'，function（a，b，c，d， e，f）{
a =test
t.row.add（[
counter + a，
counter +'test'
counter +'test'，
counter +'test'，
counter +'test'，
counter +'test'
]）.draw（false） ;
counter ++;
}）;
$（'＃example tbody ）.on（'click'，'tr'，function（e）{
if（$（this）.hasClass（'selected'））{
$（this）.removeClass（'selected' ）;
$（this）.css（'background-color'，''）
}
else {
t。$（'tr.selected'）; //。removeClass （'selected'）;
$（this）.addClass（'selected'）;
$（this）.css（'background-color'，'blue'）;
}
}）;
$（'＃removeRow'）。click（function（）{
var anSelected = fnGetSelected（t）;
$（anSelected）.remove（） ;
}）;
var t = $（'＃example'）。DataTable（{
'fnCreatedRow'：function（nRow，aData，iDataIndex）{
$（nRow）.attr 'id'，'my'+ iDataIndex）;
}，
aoColumnDefs：[{
aTargets：[0,1,2,3,4,5]，
fnCreatedCell：function（nTd，sData，oData，iRow，iCol）{
var idx = t.cell（nTd）.index（）。column;
var title = t.column （idx）.header（）;
$（nTd）.attr（id，$（title）.html（）+_+ iRow）
}
}]
}）;
}）;
函数fnGetSelected（oTableLocal）
{
return oTableLocal。$（'tr.selected'）;
}
上面的代码只是为了测试功能而不需要一些东西.. ..
****更新在post ****
表html是写在一个模板，我正在调用一个表单...具有表单代码的父级gsp文件位于.....
主要gsp文件
< g：form action =saveTravelDetailsid =createRequestname =createRequestautocomplete =off>
< g：render template =newTravelRequest/>
< div class =row>
< div class =col-md-12>
< div class =form-groupstyle =text-align：center;>
< input id =circuit_saveclass =btn btn-primary circuit_validatetabindex =700class =button_texttype =submitname =circuit_savevalue =保存/>
< input id =circuit_cancelclass =btn btn-defaultclass =button_texttype =buttonname =circuit_cancelvalue =取消/>
< button type =buttonclass =btn btn-primarydata-toggle =modaldata-target =＃detailsModal>添加新行< / button>
< button type =buttonclass =btn btn-primaryid =removeRow>删除所选行< / button>
< / div>
< / div>
< / div>
< / g：form>
模板html代码位于
< div class =row>
< div class =col-md-12>
< div class =panel panel-default>
< div class =panel-heading>
< i class =fa fa-user>< / i>旅行详情
< div class =panel-tools>
< a href =＃class =btn btn-xs btn-link panel-collapse collapses>
< / a>
< / div>
< / div>
< div class =panel-body>
< table cellpadding =0cellspacing =0border =0class =displayid =example>
< thead class =alignCenter>
< tr>
< th class =headerclass>离开日期< / th>
< th class =headerclass>返回日期< / th>
< th class =headerclass>离开目的地< / th>
< th class =headerclass>到达目的地< / th>
< th class =headerclass>选择运输方式< / th>
< th class =headerclass>旅行成本< / th>
< / tr>
< / thead>
< tbody>< / tbody>
< tfoot class =alignCenter headerclass>
< tr>
< th class =headerclass>离开日期< / th>
< th class =headerclass>返回日期< / th>
< th class =headerclass>离开目的地< / th>
< th class =headerclass>到达目的地< / th>
将第类= headerclass >选择模式前述<运输; /第>
将第类= headerclass >旅游及LT的成本; /第>
< / tr>
< / tfoot>
< / table>
< / div>
< / div>
< / div>
< / div>
下面给出了初始化DataTable的主文件中更新的javascript代码...这也有添加和删除行的功能定义
$（document）.ready（function（）{
var counter = 1
$（'＃addRow'）。on（'click'，function（）{
t.row.add（[
$（'＃departureDate_1'）。val（），
$（'＃returnDate_1'）。val（），
$（'＃startDestination'）val（），
$（'＃endDestination'）val（），
$（'＃travelMode'）。val（），
$（'＃travelFare'）val（），
]）.draw（false）;
计数器++;
$（'＃detailModal'）modal（'hide'）;
}）;
$（'＃example tbody'）。on（'click'，'tr'，function（e）{
if（$（this）.hasClass选择了））{
$（本）.removeClass（选择）;
$（this）.css（'background-color'，''）
}
else {
t。$（'tr.selected'）; //。removeClass （'selected'）;
$（this）.addClass（'selected'）;
$（本）的CSS（背景色，蓝色）;
}
}）;
$（'＃removeRow'）。click（function（）{
var anSelected = fnGetSelected（t）;
$（anSelected）.remove（） ;
}）;
var t = $（'＃example'）。DataTable（{
'fnCreatedRow'：function（nRow，aData，iDataIndex）{
$（nRow）.attr 'id'，'my'+ iDataIndex）;
$（nRow）.attr（'name'，'my'+ iDataIndex）; //或者你选择设置为id
}
aoColumnDefs：[{
aTargets：[0,1,2,3,4,5]，
fnCreatedCell：function（nTd，sData，oData，iRow， iCol）{
var idx = t.cell（nTd）.index（）。column;
var title = t.column（idx）.header（）;
$（nTd）。 attr（name，$（title）.html（）+_+ iRow）
$（nTd）.attr（id，$（title）.html（）+_+ iRow ）
}
}]
}）;
$（'＃departureDate'）。on（'change'，function（）{
$（'。bootstrap-datetimepicker-widget'）css（'display'，'none '）;
}）;
$（'＃returnDate'）。on（'change'，function（）{
$（'。bootstrap-datetimepicker-widget'）css（'display'，'none '）;
}）;
$（'＃departureDate'）。datetimepicker（{
格式：'YYYY-MM-DD'，
pick12HourFormat：false，
autoclose ：true
}）;
$（'＃returnDate'）。datetimepicker（{
格式：'YYYY-MM-DD'，
pick12HourFormat：false，
autoclose：true
}）;
}）;
函数fnGetSelected（oTableLocal）
{
return oTableLocal。$（'tr.selected'）;
}
提前感谢
$（'＃removeRow'）。click（function（）{
var anSelected = fnGetSelected（t）;
alert（anSelected）;
t.row（anSelected）.remove（）。draw（false）;
}）;
函数fnGetSelected（oTableLocal）{
return oTableLocal。$（'tr.selected'）;
}
Hi i am a newbie to DataTables .... i have a data table in which i would like to add rows (one at a time) and have the capability of a multirow delete. I have managed to get the normal functionality working but the problem is that when i delete a row/rows and then try to add a new row the deleted rows appear back in the same positions as selected rows .... below is the code i am using to initialize the DataTable and the functionality to add and delete rows in my DataTable.... Any help would be appreciated ...
$(document).ready(function (){
var counter = 1
$('#addRow').on( 'click', function (a,b,c,d,e,f) {
a = "test"
t.row.add( [
counter +a,
counter +'test',
counter +'test',
counter +'test',
counter +'test',
counter +'test'
] ).draw(false);
counter ++;
} );
$('#example tbody').on( 'click', 'tr', function (e) {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$(this).css('background-color', '')
}
else {
t.$('tr.selected');//.removeClass('selected');
$(this).addClass('selected');
$(this).css('background-color', 'blue');
}
} );
$('#removeRow').click( function () {
var anSelected = fnGetSelected( t );
$(anSelected).remove();
} );
var t = $('#example').DataTable({
'fnCreatedRow': function (nRow, aData, iDataIndex) {
$(nRow).attr('id', 'my' + iDataIndex);
},
"aoColumnDefs": [ {
"aTargets": [0,1,2,3,4,5],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
var idx = t.cell( nTd ).index().column;
var title = t.column( idx ).header();
$(nTd).attr("id",$(title).html() +"_"+ iRow)
}
} ]
});
});
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.selected');
}
The above code is just to test functionality with a few things not required....
**** Update on post **** The table html is written in a template which i am calling inside a form ... The parent gsp file with form code is below .....
Main gsp file
<g:form action="saveTravelDetails" id="createRequest" name="createRequest" autocomplete="off">
<g:render template="newTravelRequest" />
<div class="row">
<div class="col-md-12">
<div class="form-group" style="text-align: center;">
<input id="circuit_save" class="btn btn-primary circuit_validate" tabindex="700" class="button_text" type="submit" name="circuit_save" value="Save" />
<input id="circuit_cancel" class="btn btn-default" class="button_text" type="button" name="circuit_cancel" value="Cancel" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Add new row</button>
<button type="button" class="btn btn-primary" id="removeRow">Remove Selected Row</button>
</div>
</div>
</div>
</g:form>
The template html code is below
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-user"></i> Travel Details
<div class="panel-tools">
<a href="#" class="btn btn-xs btn-link panel-collapse collapses">
</a>
</div>
</div>
<div class="panel-body">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead class="alignCenter">
<tr>
<th class="headerclass">Departure Date</th>
<th class="headerclass">Return Date</th>
<th class="headerclass">Departure Destination</th>
<th class="headerclass">Arrival Destination</th>
<th class="headerclass">Choose Mode Of Transport</th>
<th class="headerclass">Cost of Travel</th>
</tr>
</thead>
<tbody></tbody>
<tfoot class="alignCenter headerclass">
<tr>
<th class="headerclass">Departure Date</th>
<th class="headerclass">Return Date</th>
<th class="headerclass">Departure Destination</th>
<th class="headerclass">Arrival Destination</th>
<th class="headerclass">Choose Mode Of Transport</th>
<th class="headerclass">Cost of Travel</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
The updated javascript code in the main file which initializes the DataTable is given below ... this also has the function definition to Add and Delete rows
$(document).ready(function (){
var counter = 1
$('#addRow').on( 'click', function () {
t.row.add( [
$('#departureDate_1').val(),
$('#returnDate_1').val(),
$('#startDestination').val(),
$('#endDestination').val(),
$('#travelMode').val(),
$('#travelFare').val(),
] ).draw(false);
counter ++;
$('#detailsModal').modal('hide');
} );
$('#example tbody').on( 'click', 'tr', function (e) {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$(this).css('background-color', '')
}
else {
t.$('tr.selected');//.removeClass('selected');
$(this).addClass('selected');
$(this).css('background-color', 'blue');
}
} );
$('#removeRow').click( function () {
var anSelected = fnGetSelected( t );
$(anSelected).remove();
} );
var t = $('#example').DataTable({
'fnCreatedRow': function (nRow, aData, iDataIndex) {
$(nRow).attr('id', 'my' + iDataIndex);
$(nRow).attr('name', 'my' + iDataIndex); // or whatever you choose to set as the id
},
"aoColumnDefs": [ {
"aTargets": [0,1,2,3,4,5],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
var idx = t.cell( nTd ).index().column;
var title = t.column( idx ).header();
$(nTd).attr("name",$(title).html() +"_"+ iRow)
$(nTd).attr("id",$(title).html() +"_"+ iRow)
}
} ]
});
$('#departureDate').on('change',function (){
$('.bootstrap-datetimepicker-widget').css('display','none');
});
$('#returnDate').on('change',function (){
$('.bootstrap-datetimepicker-widget').css('display','none');
});
$('#departureDate').datetimepicker({
format: 'YYYY-MM-DD',
pick12HourFormat: false,
autoclose: true
});
$('#returnDate').datetimepicker({
format: 'YYYY-MM-DD',
pick12HourFormat: false,
autoclose: true
});
});
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.selected');
}
Thanks in advance
解决方案
thanks for reading my question and taking the time to answer it i found the solution ... Below is the code which can be used in other scenarios also ....
$('#removeRow').click(function() {
var anSelected = fnGetSelected(t);
alert(anSelected);
t.row(anSelected).remove().draw(false);
});
function fnGetSelected(oTableLocal) {
return oTableLocal.$('tr.selected');
}
这篇关于删除的行会在添加新行数据表时出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
