How to make a row clickable and pass data to the server to get more results
How to make a row clickable and pass data to the server to get more results
drakula1234
Posts: 58Questions: 1Answers: 0
I am newbie learning dataTables plugin and I am trying to make a row clickable and pass the one of the values of the column to the server to get more details from the server. I am not sure how to do it. I really need some help on this.
From what i have read I can use mDataProp or fnReader for my purpose but not sure about that. I need a sample example to do it.
My values look something like this and I need to retrieve more information from "String1234" when I click on the row.
[code]
[
"12335688",
"String1234",
"V1234567",
"Sat Jan 10 00:08:00 EST 2009",
"2074"
]
[/code]
Thanks in advance.
From what i have read I can use mDataProp or fnReader for my purpose but not sure about that. I need a sample example to do it.
My values look something like this and I need to retrieve more information from "String1234" when I click on the row.
[code]
[
"12335688",
"String1234",
"V1234567",
"Sat Jan 10 00:08:00 EST 2009",
"2074"
]
[/code]
Thanks in advance.
This discussion has been closed.
Replies
1- Bind a function to the click event of the table's rows.
2- In this function, locate the cell that contains the information and send it over to the server for more info.
Sample code:
[code]
oTable.$('tr').click(GetInfo(this));
[/code]
And then your GetInfo() function would look like:
[code]
function GetInfo(row)
{
string_val = $(row).children('td').eq(1).html();
alert (string_val);
}
[/code]
the jquery children('td') selects the cells of the row while the eq(1) function selects the second cell. If you want to get the third cell which contains "V1234567", then you do :
[code]
string_val = $(row).children('td').eq(2).html();
[/code]
Hope this helps you. Good luck :)
I was not successful with the method you have explained, I was getting error for the oTable, instead i changed it to the following code.
[code]
$(document).ready(function () {
$.fn.dataTableExt.sErrMode = 'throw';
oTable = $('#list').dataTable({
"bServerSide": true,
"bFilter": false,
"sAjaxSource": "<%=ListURL.toString()%>",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bDeferRender": true,
});
$('#list tbody tr').live('click',function(){
var aData = oTable.fnGetData(this);
number = aData[1];
//alert(number);
});
});
[/code]
Now the problem is I need to pass the "number" value to the server side to fetch the information when I click on the row. I read that fnServerParams can be used but I cannot add that parameter after the live function. I would really appreciate some suggestions on passing that value to the server.
Thanks in advance
Rude method:
[code]
var number;
$(document).ready(function () {
// other definitions
"fnServerParams" : function (aoData) {
aoData.push({
"name": "number",
"value": number
})
},
// other definitions
}
[/code]
Hope it helps.
Peter
I am using CSHTML (asp.net Razor)
You can ignore $.msg, $.wl_Alert as i am using 3rd party modal dialog.
[code]
// tModuleListing - Items Detail Datatable
$(document).ready(function () {
var ModuleID = getParam('MM');
var MMName = "IN";
var RowID = "";
var ColumnID = "";
var oTable = $('#tModuleListing').dataTable({
"iDisplayLength": 25, // Default No of Records per page on 1st load
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], // Set no of records in per page
//"aaSorting": [[0, "asc"]], // Default 1st column sorting
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }, { "bVisible": false, "aTargets": [1] },
{ "bVisible": false, "aTargets": [2]}], // Hide Column
"bStateSave": true, // Remember paging & filters
"bDeferRender": true, // Delay loading of DOM
"bProcessing": true,
"bServerSide": true,
"bPaginate": false, // Disable pagination, showing full records.
"bInfo": false,
"bFilter": false,
"sPaginationType": "full_numbers", // Include page number
"sAjaxSource": 'Ajax_Functions/ModuleDetailListingSelect.cshtml?MMName=' + MMName + '&ModuleID=' + ModuleID,
"aoColumns": [
{ "mDataProp": "ModuleDetailID" }, { "mDataProp": "ItemID" }, { "mDataProp": "ItemAltID" },
{ "mDataProp": "ItemDescription" }, { "mDataProp": "ItemQty" }, { "mDataProp": "UnitPrice" },
{ "mDataProp": "LineDiscount" }, { "mDataProp": "LineGST" }, { "mDataProp": "LineAmt" }
],
"fnDrawCallback": function () {
$("#tModuleListing tbody tr").click(function () {
var position = oTable.fnGetPosition(this); // getting the clicked row position
RowID = oTable.fnGetData(position); // getting the value of the first (invisible) column
sessionStorage.setItem("ModuleDetailID", RowID.ModuleDetailID); // HTML 5 Session Storage;
});
oTable.$('td').click(function () {
var sData = oTable.fnGetPosition(this);
ColumnID = (sData.toString()).substring(4);
});
}
}).makeEditable({
sDeleteRowButtonId: "btnDeleteItem",
fnOnDeleting: function () {
$.confirm("Do you want to Delete Item " + RowID.ItemDescription + "?", function () {
$.msg("Processing - Deleting Item " + RowID.ItemDescription, { header: 'Deleting Item' });
$.ajax({
type: 'POST',
data: { "MMName": "IN", "ModuleID": $('#txtModuleID').val(), "ModuleDetailID": RowID.ModuleDetailID, "mAcc": "4",
"mAccType": "6" },
dataType: 'json',
url: 'Ajax_Functions/ModulesItemsDeleteFunctions.cshtml',
success: function (data) {
if (data == "Denied") {
$.msg('No Access Rights to delete!', { header: 'Access Denied!' });
$.wl_Alert('No Access Rights to delete!', 'warning', '#content');
}
else {
var oTable = $('#tModuleListing').dataTable();
oTable.fnDraw();
$("#txtDiscount").attr("value", data.LineDiscount.toFixed(2));
$("#txtGST").attr("value", data.BCGST.toFixed(2));
$("#txtAmount").attr("value", data.BCAmount.toFixed(2));
$("#txtSubTotal").attr("value", data.BCSubTotal.toFixed(2));
$("#txtBalance").attr("value", data.Balance.toFixed(2));
$("#txtAmtRecd").attr("value", data.AmtRecd.toFixed(2));
$.msg("Item - " + RowID.ItemDescription + " Deleted!", { header: 'Success!' });
$.wl_Alert("Item - " + RowID.ItemDescription + " Deleted!", 'success', '#content');
}
},
error: function () {
$.wl_Alert('Failed to Delete item', 'warning', '#content'); $.msg(id, { header: 'Deleting Item' });
}
});
});
return false;
},
"aoColumns": [ null, null, null, null, null, null ] // Disable all the inline editable
});
}); // tModuleListing - Items Detail Datatable -- END
[/code]
Smile
Chankl78
Smile
Chankl78