Server Side
----------------------
public class Result
{
public int articleid { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public string Extn { get; set; }
public string Startdate { get; set; }
public string Salary { get; set; }
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetJsonEmps()
{
List<Result> lsts = new List<Result>();
for (int i = 1; i <= 10; i++)
{
lsts.Add(new Result() { articleid = i, Name = "AA" + i, Position = "home" + i, Office = "aas" + i, Extn = "extn" + i, Startdate = "date" + i, Salary = "sal" + i });
}
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(new { data = lsts });
if (!string.IsNullOrEmpty(json))
{
return json;
}
return "";
}
Client Side
-------------------
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
$(document).ready(function () {
$("#btnSave").click(function (e) {
var table = $('#example').DataTable();
e.preventDefault();
$(".chkcls").each(function () {
if (this.checked) {
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
var rowId = data[0];
alert("row id is " + rowId);
}
});
});
createtable();
});
function drawTable(arr) {
var table = $('#example').DataTable({
iDisplayLength: 5,
responsive: true,
processing: true,
"aaData": arr,
columns: [
{ title: "Select" },
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn" },
{ title: "Startdate" },
{ title: "Salary" }
],
"aoColumnDefs": [{
"aTargets": [0],
//"mData": "download_link",
"mRender": function (data, type, full) {
//debugger;
if (isarticlesubmittable(data)) {
return '<input type=\"checkbox\" class=\"chkcls\" disabled="disabled" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" class=\"chkcls\" value="' + data + '">';
}
}
}]
});
}
function isarticlesubmittable(status) {
return status == 1 || status == 3;
}
var datatable;
function createtable() {
$.ajax({
type: "GET",
url: "Jquery-datatable.aspx/GetJsonEmps",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response) { drawtable(response); },
error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
});
}
function csave() {
datatable.destroy();
}
function drawtable(result) {
var result = $.parseJSON(result.d);
var arrayReturn = [];
for (var i = 0, len = result.data.length; i < len; i++) {
var res = result.data[i];
arrayReturn.push([res.articleid, res.Name, res.Position, res.Office, res.Extn, res.Startdate, res.Salary]);
}
drawTable(arrayReturn);
}
Final Output
-------------------
----------------------
public class Result
{
public int articleid { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public string Extn { get; set; }
public string Startdate { get; set; }
public string Salary { get; set; }
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetJsonEmps()
{
List<Result> lsts = new List<Result>();
for (int i = 1; i <= 10; i++)
{
lsts.Add(new Result() { articleid = i, Name = "AA" + i, Position = "home" + i, Office = "aas" + i, Extn = "extn" + i, Startdate = "date" + i, Salary = "sal" + i });
}
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(new { data = lsts });
if (!string.IsNullOrEmpty(json))
{
return json;
}
return "";
}
Client Side
-------------------
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
$(document).ready(function () {
$("#btnSave").click(function (e) {
var table = $('#example').DataTable();
e.preventDefault();
$(".chkcls").each(function () {
if (this.checked) {
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
var rowId = data[0];
alert("row id is " + rowId);
}
});
});
createtable();
});
function drawTable(arr) {
var table = $('#example').DataTable({
iDisplayLength: 5,
responsive: true,
processing: true,
"aaData": arr,
columns: [
{ title: "Select" },
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn" },
{ title: "Startdate" },
{ title: "Salary" }
],
"aoColumnDefs": [{
"aTargets": [0],
//"mData": "download_link",
"mRender": function (data, type, full) {
//debugger;
if (isarticlesubmittable(data)) {
return '<input type=\"checkbox\" class=\"chkcls\" disabled="disabled" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" class=\"chkcls\" value="' + data + '">';
}
}
}]
});
}
function isarticlesubmittable(status) {
return status == 1 || status == 3;
}
var datatable;
function createtable() {
$.ajax({
type: "GET",
url: "Jquery-datatable.aspx/GetJsonEmps",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response) { drawtable(response); },
error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
});
}
function csave() {
datatable.destroy();
}
function drawtable(result) {
var result = $.parseJSON(result.d);
var arrayReturn = [];
for (var i = 0, len = result.data.length; i < len; i++) {
var res = result.data[i];
arrayReturn.push([res.articleid, res.Name, res.Position, res.Office, res.Extn, res.Startdate, res.Salary]);
}
drawTable(arrayReturn);
}
Final Output
-------------------
