I am trying to get inline row deleting working in datatables where there is
only a delete image (unchecked.gif) in the last column of each row (i.e.
oDeleteRowButtonOptions is not visible) and clicking on this image will delete
the row in datatables and mysql.
The datatable lists public holidays and has 5 columns - HolID (primary key);
holiday_name; holiday_date; day_name; column to hold delete image.
What is the expected output? What do you see instead?
When I click the delete image, I get an alert which confirms the correct row
id, but it thens fail to invoke the deletedata.php file. I think the problem
is in the line - return"<a class='table-action-deletelink'
href='modules/holidays/holidays_DeleteData?id=" + aData.HolID + "'></a>", but I
don't know how to fix it.
Also, is there an option for oDeleteRowButtonOptions to make the button
invisible?
Interestingly, I can only get inline editing for columns 2 onwards to work. I
can't get inline editing to work on column 1.
What version of the product are you using? On what operating system?
Datatables 1.8.2; jEditable 1.6.2, datatables-editable 1.3.0 (using 2.3.1
breaks the table), with sName changed to mDataProp on line 198 (252 in 2.3.1)
Here is my code
var oTable;
$('#holidays tbody td img').live( 'click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('unchecked') )
{
var aData = oTable.fnGetData( nTr );
//window.alert(aData.HolID);//just a test to confirm correct DT_RowID returned
return"<a class='table-action-deletelink' href='modules/holidays/holidays_DeleteData?id=" + aData.HolID + "'></a>"
}
} );
$(document).ready( function () {
oTable = $('#holidays').dataTable({
"sDom": '<"clear"><"H"fr>t<"F"i>',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "modules/holidays/holidays_objects.php",
"bJQueryUI": true,
"aoColumns": [
{ "mDataProp": "HolID", "sClass": "center"},
{ "mDataProp": "holiday_name"},
{ "mDataProp": "holiday_date"},
{ "mDataProp": "day_name"},
{ "mDataProp": null, "sDefaultContent": '<img src="media/images/unchecked.gif">', "sClass": "center", "bSearchable": false, "bSortable": false, "sWidth": "10px" },
]
}
).makeEditable({
sUpdateURL: "modules/holidays/holidays_UpdateData.php",
sAddURL: "modules/holidays/holidays_AddData.php",
sDeleteURL: "modules/holidays/holidays_DeleteData.php",
sAddNewRowFormId: "formNewHoliday",
oAddNewRowButtonOptions: {
label: "New Holiday",
icons: { primary: 'ui-icon-plus' }
},
"aoColumns": [
{// HolID
indicator: 'Saving Holiday ID ...',
tooltip: 'Click to change HolID',
onblur: 'submit',
type: 'text',
},
{// holiday name
indicator: 'Saving Holiday ...',
tooltip: 'Click to change Holiday Name',
onblur: 'submit',
type: 'text',
},
{// holiday date
indicator: 'Saving Holiday Date ...',
tooltip: 'Click to change Holiday Date',
//onblur: 'submit',
type: 'datepicker',
},
{//day
indicator: 'Saving Holiday day of week ...',
tooltip: 'Click to select Holiday day of week',
type : "autocomplete",
autocomplete : {
autofill : true,
max : 3,
selectFirst : true,
highlight : true,
source : 'modules/holidays/get_days.php'
},
onblur: 'submit',
},
null
],
});
});
Thanks, BanDan88
Original issue reported on code.google.com by dkimt...@yahoo.com on 19 Mar 2012 at 7:36
Original issue reported on code.google.com by
dkimt...@yahoo.com
on 19 Mar 2012 at 7:36