Iterate throught Jquery Datatable Selected rows

Question

User-1437298086 posted

Hello

I have a Jquery Datatable I am using in my C# ASP.net application. here is an example of how I create the table on page load.

protected void Page_Load(object sender, EventArgs e)
{
CreateTable();
}

private void CreateTable()
{
StringBuilder htmlTable = new StringBuilder();
htmlTable.AppendLine("<table id=" + (char)34 + "BlackOuts" + (char)34 + "> ");
htmlTable.AppendLine("<thead>");
htmlTable.AppendLine("<tr>");
htmlTable.AppendLine("<th>colum 1</th>");
htmlTable.AppendLine("<th>colum 2</th>");
htmlTable.AppendLine("<th>colum 3</th>");
htmlTable.AppendLine("</tr>");
htmlTable.AppendLine("</thead>");
/*Put a for loop here and repeat the below code*/
htmlTable.AppendLine("<tbody>");
htmlTable.AppendLine("<tr>");
htmlTable.AppendLine("<td>colum 1 data</td>");
htmlTable.AppendLine("<td>colum 2 data</td>");
htmlTable.AppendLine("<td>colum 3 data</td>");
htmlTable.AppendLine("</tr>");
htmlTable.AppendLine("<tr>");
htmlTable.AppendLine("<td>colum 1 data</td>");
htmlTable.AppendLine("<td>colum 2 data</td>");
htmlTable.AppendLine("<td>colum 3 data</td>");
htmlTable.AppendLine("</tr>");
htmlTable.AppendLine("<tr>");
htmlTable.AppendLine("<td>colum 1 data</td>");
htmlTable.AppendLine("<td>colum 2 data</td>");
htmlTable.AppendLine("<td>colum 3 data</td>");
htmlTable.AppendLine("</tr>");
htmlTable.AppendLine("<tr>");
htmlTable.AppendLine("<td>colum 1 data</td>");
htmlTable.AppendLine("<td>colum 2 data</td>");
htmlTable.AppendLine("<td>colum 3 data</td>");
htmlTable.AppendLine("</tr>");
htmlTable.AppendLine("</tbody>");
/*End For loop*/
htmlTable.AppendLine("</table>");

litTable.Text = htmlTable.ToString();

}

on the actual ASP page itself I have this 

<asp:Literal ID="litTable" runat="server" />  which is where the table will be generated on page load.

and the Jquery is

$(function () {
$("#datepicker").datepicker();
//$('#BlackOuts').DataTable();
var table = $('#BlackOuts').DataTable();

$('#BlackOuts tbody').on('click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
});

What I want to do is when a user selects a row(s) on the table and presses the delete button for example, I want to be able to get a the column value of a selected row so I can delete that in my DB.

I have no problems doing this Via PHP but I want to do it in the code behind in ASP.net and I would prefer to use the Jquery DataTables. 

any thoughts?

Gerard

Answer 1

User2103319870 posted

I want to be able to get a the column value of a selected row s

You can try with below code

$(function () {
			$("#datepicker").datepicker();
			//$('#BlackOuts').DataTable();
			var table = $('#BlackOuts').DataTable();

			$('#BlackOuts tbody').on('click', 'tr', function () {
				if ($(this).hasClass('selected')) {
					$(this).removeClass('selected');
				}
				else {
					table.$('tr.selected').removeClass('selected');
					$(this).addClass('selected');
				}
				//Get the first column data
				var col1 = $(this).find("td").eq(0).html();
				//Get the Second column data
				var col2 = $(this).find("td").eq(1).html();
				//Get the third column data
				var col3 = $(this).find("td").eq(2).html();

				
				
			});

Answer 2

User-1437298086 posted

thanks,

how do I get that in the .cs code behind file though? I want to do something with that clicked data in the background...not from the JavaScript?

cheers

Answer 3

User2103319870 posted

how do I get that in the .cs code behind file though? I want to do something with that clicked data in the background...not from the JavaScript?

You can use Ajax to pass the value to code behind

Sample implementation

$(function () {
			$("#datepicker").datepicker();
			//$('#BlackOuts').DataTable();
			var table = $('#BlackOuts').DataTable();

			$('#BlackOuts tbody').on('click', 'tr', function () {
				if ($(this).hasClass('selected')) {
					$(this).removeClass('selected');
				}
				else {
					table.$('tr.selected').removeClass('selected');
					$(this).addClass('selected');
				}
				//Get the first column data
				var col1 = $(this).find("td").eq(0).html();
				//Get the Second column data
				var col2 = $(this).find("td").eq(1).html();
				//Get the third column data
				var col3 = $(this).find("td").eq(2).html();
				//Code to pass value from aspx to code behind
				$.ajax({
					type: "POST",
					//Change the page name and method name as per your design
					url: "JquerySamplePage.aspx/DeleteRecords",
					//Change parameter name as per your design
					data: '{Id: "' + col1 + '" }',
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function (response) {
						if (response.d) {
							//Success
							alert(response.d);
						}
					},
					failure: function (response) {
						//Failure
						alert("Error occured:" + response.d);
					}
				});

			});
		});

C# Method

[System.Web.Services.WebMethod]
		public static bool DeleteRecords(string Id)
		{
			//Your code to delete records here
			return true;
		}

Answer 4

User-1437298086 posted

thank you kindly. that worked....now that I will play with it and instead of on click...I will have the user select the row and then press a button which will then use AJAX to send the selected row to the code behind :)

cheers