I am using https://markcell.github.io/jquery-tabledit/. It works perfectly when I have the datatable with PHP.
However when I do the same with AJAX, the datatable is not recognized (functionalities doesn't work)
I was wondering if it could be any workaround to get this work or is it in general when you fetch you cant use it with javascript after its fetched?
I am also open for any suggestion for a live editable datatable library
Thank you
$(document).ready(function() {
fetch_orderdetails()
function fetch_orderdetails() {
$.ajax({
url: "/api/v1/orders/1",
dataType: "json",
success: function(orderdetails) {
var html = '';
for (var count = 0; count < orderdetails.length; count++) {
alert(orderdetails[count].coincode);
html += '<tr style="text-align:center!important;">';
html += '<td style="display:none;">' + orderdetails[count].id + '</td>';
html += '<td>' + orderdetails[count].jeton + '</td>';
html += '<td>' + orderdetails[count].triggerpricebuy + '</td>';
html += '<td>' + orderdetails[count].triggerpricesell + '</td>';
html += '<td>' + orderdetails[count].availableusd + '</td>';
html += '<td>Action</td>';
html += '<td>' + orderdetails[count].coincode + '</td>';
html += '</tr>';
}
$('tbody#orderdetails').html(html);
}
});
}
});
<div class="row">
<div class="col-xl-9 col-lg-12">
<div class="table-responsive text-white table-hover fs-14" style="">
#csrf
<table id="editable" class="table table-striped display mb-4 dataTablesCard short-one card-table text-black" style="font-size:1.1rem; text-align:center!important; color:white!important;">
<thead style="font-size:1.5rem!important;">
<tr>
<th style="display:none!important;">id</th>
<th style="padding-left: 0px!important; padding-right:0px!important;">Jeton</th>
<th>BuyPrice</th>
<th>SellPrice</th>
<th>$ Value</th>
<th>Actions</th>
<th>OrderType</th>
</tr>
</thead>
<tbody id="orderdetails">
// For non-Ajax version only difference I have a foreach loop here with the same source with same classes and other details.
</tbody>
</table>
</div>
</div>
PHP CODE added below it is used on the first HTML inside of the TBODY tags
<tbody>
#foreach($ordersetup as $orderlines)
#if ($orderlines->status == 0)
#php
$bgcolororderlines = 'background:##05031a;';
$buttonicon = "play";
$buttonurl = "activate";
$buttonclass = "success";
$jetonbackgroundcolor='background:#370e12;';
#endphp
#else
#php
$bgcolororderlines = 'background:##0688ba;';
$buttonicon = "pause";
$buttonurl = "pause";
$buttonclass = "warning";
$jetonbackgroundcolor='background:#17370e;';
#endphp
#endif
<tr style="{{$bgcolororderlines}} ">
#if ($orderlines->jeton==0)
#php $badgeclass='badge badge-danger'; #endphp
#else
#php $badgeclass='badge badge-warning'; #endphp
#endif
<td style="display:none!important;">{{ $orderlines->id }}</td>
<td style=""><div class="{{$badgeclass}}">{{ $orderlines->jeton }}</div></td>
<td>{{ $orderlines->triggerpricebuy }}</td>
<td>{{ $orderlines->triggerpricesell }}</td>
<td>{{ $orderlines->availableusd }}</td>
<td>{{ $orderlines->coincode }}</td>
<td></td>
</tr>
#endforeach
</tbody>
Related
What would be the easiest way to add a filter to a table column(Status)? I found different things but they all suggest something like a search box but I do not want that. I tried another thing but it has not been working. Below is my code without any filters. I highly appreciate your help.
CONTROLLER
public ActionResult ViewAllTasks()
{
HelpDeskDBHandle dbhandle = new HelpDeskDBHandle();
return View(dbhandle.GetITTasksList());
}
//LIST IT TASKS
public JsonResult ListITTasks()
{
HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
return Json(hdDB.GetITTasksList(), JsonRequestBehavior.AllowGet);
}
VIEW
#*IT TASKS PAGE----------------------------------------------------------------------------------------*#
#model IEnumerable<HelpDeskSupport.Models.ITTasksModel>
#{
Layout = null;
}
<head>
<meta name="viewport" content="width=device-width" />
<title>ViewAllTasks</title>
<script src="~/Scripts/ITTasksJS.js"></script>
</head>
<div class="container">
<h2>IT Tasks</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
onclick="clearTextBox();">Add New Task</button><br /><br />
<table class="display table table-striped table-bordered" id="knowledgeTable">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.ITNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.ITDescription)
</th>
<th>
#Html.DisplayNameFor(model => model.ITEnterDate)
</th>
<th>
#Html.DisplayNameFor(model => model.ITAssignedTo)
</th>
<th>
#Html.DisplayNameFor(model => model.ITEstimatedCompletion)
</th>
<th>
#Html.DisplayNameFor(model => model.ITPriority)
</th>
<th>
#Html.DisplayNameFor(model => model.ITFrom)
</th>
<th>
#Html.DisplayNameFor(model => model.ITStatus)
</th>
</tr>
</thead>
<tbody class="tbody">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ITNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITEnterDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITAssignedTo)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITEstimatedCompletion)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITPriority)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITFrom)
</td>
<td>
#Html.DisplayFor(modelItem => item.ITStatus)
</td>
</tr>
}
</tbody>
</table>
</div>
JAVASCRIPT
//Load Data in Table when documents is ready
$(document).ready(function () {
loadData();
});
//Load Data function
function loadData() {
$.ajax({
url: "/Tickets/ListITTasks",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.ITNumber + '</td>';
html += '<td>' + item.ITDescription + '</td>';
html += '<td>' + item.ITEnterDate + '</td>';
html += '<td>' + item.ITAssignedTo + '</td>';
html += '<td>' + item.ITEstimatedCompletion + '</td>';
html += '<td>' + item.ITPriority + '</td>';
html += '<td>' + item.ITFrom + '</td>';
html += '<td>' + item.ITStatus + '</td>';
html += '<td><a href="#" onclick="return getbyTicketNumber(' + item.ITNumber +
')">Edit</a> | Delete</td>';
html += '</tr>';
});
$('.tbody').html(html);
alert("Successful Loaddata ITTASK");
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
THANKS A LOT AGAIN!!!
Add your request url Status Value like :
url: "/Tickets/ListITTasks?status=0",
I assume that Status prop accept int. You can change to string.
Then add your controller function parameter like :
public JsonResult ListITTasks(int status){}
Then in your Repository create new(or update GetITTasksList()) function with accepting int parameter. And write your sql or linq filter with PredicateBuilder or .Where().
Then return result of course.
Thanks for your help, I ended up using Datatables which also have a filter functionality
So I have this App using AJAX technique with jQuery library to call the Spring-boot REST controller method. The app works but I cant make the searchresult to fit inside HTML tables.
result
HTML code:
<div align="center">
<div class="ui-widget">
<p>Type a product</p>
<label for="automplete-1">Tags: </label>
<input type="text" id="productName">
</div>
</div>
<br>
<!-- <br> Result -->
<br>
<div class="table table-bordered table-striped" id="result_table">
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</table>
</div>
JavaScript code:
$(document).ready(function() {
$('#productName')
.autocomplete({
minLength: 2,
source: '${pageContext.request.contextPath }/product/search',
/* declare sourc variable */
select: function(event, ui) {
/* click event dans ui to fire method*/
/* alert(event) */
var inputFromBox = ui.item.label;
var searchResults = [];
var html_to_append = '';
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath }/product/search_full?inputParam=' + inputFromBox,
dataType: 'json',
success: function(response) {
console.log(response);
$.each(response, function(i, item) {
html_to_append += '<tr>';
html_to_append += '<td >' + item.id + '</td>';
html_to_append += '<td>' + item.name + '</td>';
html_to_append += '<td>' + item.description + '</td>';
html_to_append += '<td>' + item.price + '</td>';
html_to_append += '</tr>';
});
$("#result_table table").append(html_to_append);
},
});
}
});
});
Since your element with the id result_table is a <div>, NOT a table.
<div class="table table-bordered table-striped" id="result_table">
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</table>
</div>
So, you will need to change:
$("#result_table").append(html_to_append);
to
$("#result_table table").append(html_to_append);
I am using the following function in a datatables table.
function novaData(d){
var dia = d.getDate().toString();
dia = (dia.length == 1) ? '0'+dia : dia;
var mes = (d.getMonth()+1).toString();
mes = (mes.length == 1) ? '0'+mes : mes;
var ano = d.getFullYear();
return dia+"-"+mes+"-"+ano;
}
class CellDate{
constructor( start_date ){
this.date = start_date;
}
getNextDate(){
if($('#user_data tbody tr').length){
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes-1);
this.date.setYear(ultimo_ano);
this.date.setDate( this.date.getDate()+1);
}else{
this.date.setMonth(this.date.getMonth()+1);
this.date.setDate(1);
}
return novaData(this.date);
}
}
var DateIndexer = new CellDate(new Date(Date.now()));
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html);
});
Within the class in getNextDate, when it is true (the table already has rows), creating a new row fills the date field with the date of the next day of the last row already entered.
But if the table has no row inserted, it returns in the date field NaN-NaN-NaN, because it does not enter into the else.
If you put console.log(DateIndexer.getNextDate()); before the function $('#add').click(function(){ returns 01-08-2019.
But if put console.log(DateIndexer.getNextDate()); inside the function $('#add').click(function(){ returns NaN-NaN-NaN.
Table #user_data:
<div class="container box">
<h3 align="center">MAPA DE TRABALHO</h3>
<h5 align="center">Ajudante de Ação Direta - Turno: Manhã</h5>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" name="add" id="add" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span></button>
</div>
<br />
<div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Your html has no tbody, returning null on you first execution
Try to include a tbody
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This will fix your code here:
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html); //<--- right here
});
Your condition on if need to be reviewed too, because on the first execution tbody was empty, change to this
class CellDate {
constructor(start_date) {
this.date = start_date;
}
getNextDate() {
//here the change for if condition
if ($('#user_data tbody tr') != null && $('#user_data tbody tr').length > 0) {
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes - 1);
this.date.setYear(ultimo_ano);
this.date.setDate(this.date.getDate() + 1);
console.log('if', this.date);
} else {
this.date.setMonth(this.date.getMonth() + 1);
this.date.setDate(1);
console.log('else', this.date);
}
return novaData(this.date);
}
}
Code here https://jsfiddle.net/nzb0tdjq/
Being new to AJAX I have encountered this problem and have had no luck resolving it. I want my table to be refreshed after an ajax post to review an object, everything I've tried has been futile.
Assume the ajax response is a JSON result, to avoid posting my OnPost() code.
I send the Id of the product using ajax and then use that Id to remove the product
I then call the same method OnGet() uses to populate the tables which returns the updated list. In chrome debug tools I see the response successfully returns with the updated list. I just don't know how to get it across back to my list. Thanks in advance guys.
#Html.AntiForgeryToken()
<table id="shoppingBag" class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.ShoppingBagItems)
{
<tr>
<td>
#item.Product.Name
</td>
<td>
#item.Price.ToString("C")
</td>
<td>
<input value="#item.Quantity" size="1" maxlength="1" class="text-center" />
</td>
<td>
<button onclick="remove(#item.Product.Id.ToString())" class="close">
<span aria-hidden="true">×</span>
</button>
</td>
</tr>
}
</tbody>
</table>
<script>
function remove(id) {
$.ajax({
type: 'POST',
url: 'ShoppingBag?handler=Delete',
headers: {
"XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: ''+id+'',
sucess: function (response) {
append_json(response);
}
});
}
function append_json(data){
var table = document.getElementById('shoppingBag');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.product.name +
'</td>' +
'<td>' +
object.price +
'</td>' +
'<td>' +
object.quantity +
'</td>';
table.appendChild(tr);
});
}
</script>
In Ajax success method after this append_json(response);add below code to refresh the table
$("#shoppingBag").load(window.location + " #shoppingBag");
change:
var table = document.getElementById('shoppingBag');
to:
var table = $('#shoppingBag tbody');
AND
change:
table.appendChild(tr);
to:
table.append(tr);
you are appending your data to main <table> if you inspect your table you can see the appended html.but you need to append data in body of table
for this you can use $("#shoppingBag tbody").append(tr);
or you can add id to <body> like <tbody id="myTestTableBody"> and use this in to your JavaScript
function append_json(data){
var table = document.getElementById('myTestTableBody');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.product.name +
'</td>' +
'<td>' +
object.price +
'</td>' +
'<td>' +
object.quantity +
'</td>';
table.appendChild(tr);
});
}
I have added a sample code that how you can append data to existing table
var page=1;
function AddData() {
$.ajax({
url: "https://reqres.in/api/users?page="+page,
type: "GET",
success: function(response){
append_json(response.data);
}
});
page++;
}
function append_json(data){
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.first_name +
'</td>' +
'<td>' +
object.last_name +
'</td>' +
'<td>' +
'<img src ='+object.avatar +' width="50px" height="50px" />'+
'</td>';
$("#shoppingBag tbody").append(tr);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Add Data" onclick="AddData()">
<table id="shoppingBag" class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one
$(document).ready(function() {
$('#chemist_allotment_btn').click(function() {
if ($('#chemist_allotment_form').valid()) {
$.ajax({
url: 'update_chemist_bulk_transfer.php',
type: 'POST',
data: $('form#chemist_allotment_form').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function(key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td>' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td>' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
$('#SampleDT tbody').empty().append(htmlString);
$('#get_to_area').click(function() {
var id = $('input[name=getchemist]:checked').val();
if ($(".getchemist").prop('checked') == true) {
alert(id);
alert(value.to_area);
} else {
alert('Please Check');
}
});
} else {
$('#SampleDT tbody').empty().append('No Datas Found');
}
},
});
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<center>
<div class="form-group">
<button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>
Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select
Somewhat like this:
<tr class="row-select">
<td class="select">...</td>
<td class="id">...</td>
<td class="to-area">...</td>
.
.
.
</tr>
Use jQuery like this:
$('.row-select').click(function(){
var id,toArea,checkBox;
id = $(this).find('.id').html(); //get the ID field
toArea = $(this).find('.to-area').html(); //get the to-area field
checkBox = $(this).find('.select > input');
checkbox.prop('checked',!checkbox.prop('checked'));
})
This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox
To get the values of rows selected when the form is submitted run a loop like this
$('.row-select input:checked').each(function(){
var id,toArea,checkBox;
id = $(this).closest('tr').find('.id').html(); //get the ID field
toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})
EDIT
All together:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('.row-select input:checked').each(function() {
var id, name;
id = $(this).closest('tr').find('.id').html();
name = $(this).closest('tr').find('.name').html();
alert('ID: ' + id + " | Name: " + name);
})
})
$('#btnSelectAll').click(function() {
$('.row-select input').each(function() {
$(this).prop('checked', true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">12</td>
<td class="name">Jones</td>
</tr>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">10</td>
<td class="name">Joseph</td>
</tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>
Process step-by-step:
Give the td you need some classes (from-a & to-a);
Initialize an empty array all (we'll store the data inside it later on);
Create a function that is triggered by the checkbox change
Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
If the state = checked we will add the values to the all (our small data storage);
If the state = not-checked we will remove the value from the all array;
Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.
var all = [];
$('input[type="checkbox"]').change(function(){
var checkbox = $(this);
var state = checkbox.prop('checked');
var tr = checkbox.parents('tr');
var from = tr.children('.from-a').text();
var to = tr.children('.to-a').text();
if(state){
all.push(from + ' -> ' + to);
}else{
var index = all.indexOf(from + ' -> ' + to);
all.splice(index, 1);
}
})
$('#get_to_area').click(function(){
alert(all);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox"></td>
<td>1</td>
<td>Nick</td>
<td class="from-a">Kosur</td>
<td class="to-a">Nath Pari</td>
<td>Address</td>
</tr>
<tr id="2">
<td><input type="checkbox"></td>
<td>2</td>
<td>John</td>
<td class="from-a">Rusok</td>
<td class="to-a">iraP htaN</td>
<td>sserddA</td>
</tr>
</tbody>
</table>
<center>
<div class="form-group">
<button style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.
You can also use this fiddle:
In JS:
$('#get_to_area').click(function () {
var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
}
else {
alert('Please Check');
}
});
In Html:
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function (key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td class="chkid">' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td class="toarea">' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.
As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.
var Result = new Array();
$('.checkbox-custom input[type="checkbox"]:checked').each(function(){
var _this = $(this).closest('tr').find('td');
var id= $(_this).eq(0);
var name = $(_this).eq(1);
................... //Similar way for the others
Result.Push(id,name,....)
});