We Keep Coding

reload datatable by ajax and json

I'm using datatable plugin and want to refresh table by ajax. I've read here to make my ajax return shows in table but it doesn't work. Here is my html code:
<button type="button" onclick="rld()">test</button>
<table id="sample_1">
<thead>
<tr>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
</tr>
</thead>
</table>
My java function:
function rld(){
var table = $('#sample_1').DataTable( {
ajax: '<?php echo site_url('admin/test'); ?>',
deferRender: true,
columns: [
{ data: '1' },
{ data: '2' },
{ data: '3' }
],
rowId: 'extn',
select: true,
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
}
I can't get what the problem is. there in no alerts but in the console i get TypeError: f is undefined
and TypeError: c is undefined
Which i don't know why cause my json return is correct (checked in [JSONLint][3]).
Thanks in advance.

Thank you all for your attention :)
Found that i didn't call where the data goes when returned as json and the json field's name isn't equal to the column data field name. So make this adjustment:
function reload_table(){
var table = $('#sample_1').DataTable();
table.destroy();
var table = $('#sample_1').DataTable( {
"processing": true,
"dataType": 'json',
ajax: '<?php echo site_url('admin/relaod_table'); ?>',
deferRender: true,
columns: [
{ data: 'user_firstname' },
{ data: 'user_lastname' },
{ data: 'user_status' },
{ data: 'user_created_date' },
],
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
}

How to create AJAX POST button for multiple data in table?

I have table like this
<table>
<tr>
<th>User</th>
<th>IP</th>
<th>Action</th>
</tr>
<tr>
<td>Jack</td>
<td>192.168.0.1</td>
<td><button id="check" name="192.168.0.1">Check</button></td>
</tr>
<tr>
<td>Eve</td>
<td>192.168.0.2</td>
<td><button id="check" name="192.168.0.2">Check</button></td>
</tr>
<tr>
<td>Smith</td>
<td>192.168.0.3</td>
<td><button id="check" name="192.168.0.3">Check</button></td>
</tr>
</table>
How to implementation to send POST data IP with AJAX?
I have tried with this code but does not work..
<script>
$('#check').click(function() {
var getIP = $('#check').name();
var dataIP = 'sendIP=' + getIP;
$.ajax({
url: 'url.php',
type: 'POST',
data: dataIP;
success: function () {
alert("Success");
}
});
});
</script>
[UPDATE]
This is Full code for my project.
<script>
$(document).ready(function() {
$('#reportrange span').on('DOMSubtreeModified', function () {
var dariRange = $(this).html();
var SplitRange = dariRange.split("~");
$('#datatable-keytable').DataTable( {
"destroy": true,
"processing": true,
"keys": true,
"order": [[ 6, "desc" ]],
"ajax": {
url: "view.php",
type : 'GET',
data : {
datedari : SplitRange[0].trim(),
datesampai : SplitRange[1].trim()
}
},
"columnDefs": [
{ "width": "5%", "targets": 0 },
],
"columns": [
{ "data": "click_username" },
{ "data": "click_cid" },
{ "data": "click_offer" },
{ "data": "click_ip" },
{ "data": "click_isp" },
{ "data": "click_posttime" },
{ "data": "click_ip",
"render": function (click_ip,data,row) {
var clickid = data.click_cid;
return ('<center><button class="check" id="'+click_ip+'" name="'+clickid+'">Check</button></center>'); //This for Button check
}
},
],
} );
} );
} );
</script>
<script type="text/javascript">
$(document).on('click', '.check',function() {
var dataID = 'sendCID=' + this.name;
var dataIP = this.id;
$.ajax({
url: 'send_data.php',
type: 'POST',
data: dataID;
success: function () {
window.open('http://whatismyipaddress.com/ip/'+dataIP);
}
});
});
</script>
I want to POST var dataID to send_data.php and then if success open new tab to http://whatismyipaddress.com/ip/'+dataIP but does not work with this code,
I hope someone help me to resolve this, thank you

You can't repeat ID's in a page , they are unique by definition, so will need to change to a class
Within an event handler this is the element the event occurred on so in your case this.name would be value needed
// use class selector
$('.check').click(function() {
var dataIP = 'sendIP=' + this.name;
$.ajax({
url: 'url.php',
type: 'POST',
data: dataIP;
success: function () {
alert("Success");
}
});
});

How to get particular column in responsive jquery datatable for small Screen

I have implemented responsive jquery datatable in one of my project.
At the end of each row there is edit/detail link.
If i click edit/detail link:
1)Large Screen - It picks the UseID(Which is first Column in a row), so that i can edit that User.
2)Small Screen - Because of responsiveness the row will splitted as show below. It doesnot pick that User ID.
Large Screen Edit/Detail is Last row
Large Screen after clicking Edit link
Small Screen See Edit/detail link which is splitted
I am not able to get the UserID alert when i click edit link whenever the screen is small.
My Code.
<table id="myExample" class="display responsive nowrap">
<thead>
<tr>
<th>User Name</th>
<th>First Name</th>
<th>LastName</th>
<th>Street</th>
<th>City</th>
<th>Zip</th>
<th>State</th>
<th>Email</th>
<th>Edit</th>
</tr>
</thead>
</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.responsive.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#myExample').DataTable({
"ajax": {
"url": "/Admin/LoadData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Usr_Nm", "autowidth": true },
{ "data": "FirstName", "autowidth": true },
{ "data": "LastName", "autowidth": true },
{ "data": "Street", "autowidth": true },
{ "data": "City", "autowidth": true },
{ "data": "Zip", "autowidth": true },
{ "data": "Sate", "autowidth": true },
{
data: null,
defaultContent: 'Edit/Detail',
orderable: false
}
]
});
$('#myExample').on('click', 'a.Edit', function (e) {
var UserId = $(this).closest('tr.').find('td').find('.sorting_1').text();
$.ajax({
url: '/Admin/UserEdit',
type: "GET",
data: { 'id': UserId },
dataType: "json",
success: function (response) {
// alert('1:');
// alert(response);
if (response.isRedirect) {
// alert('1');
window.location.href = response.redirectUrl;
//window.location.href = response.redirectUrl;
}
// }
},
error: function (response) {
alert("Some error");
}
});
});
})
</script>
To get UserID:
var UserId = $(this).closest('tr.').find('td').find('.sorting_1').text();
Inspect Element in Large Screen
Inspect Element in Small Screen:

You must go through the dataTables API in order to get data for columns not present in the DOM (removed due to responsiveness).
You can get the all values for a certain row by table.row(<tr-node>).data() :
$('#myExample').on('click', 'a.Edit', function (e) {
var data = table.row($(this).closest('tr')).data()
//if it is "User Name" / first column you are after
var userId = data[0]
...
})

get the ID of specific row in JQuery datatable

I have JQuery table like following image
I want to alert the ProductID once I click V link text in Action column
<table id="productTable">
<thead>
<tr>
<th>ProductID</th>
<th>TitleEN</th>
<th>TypeEN</th>
<th>ModifiedDate</th>
<th>Actions</th>
</tr>
</thead>
</table>
#* Load datatable css *#
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
#section Scripts{
#* Load DataTable js here *#
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#productTable").DataTable({
"info": false,
"processing": true,
"serverSide": true,
"filter": false,
"orderMulti": false,
"ajax": {
"url": "/Home/LoadProductData",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
{ "data": "Product_Title_EN", "name": "Product_Title_EN", "autoWidth": true },
{ "data": "Product_Type_EN", "name": "Product_Type_EN", "autoWidth": true },
{ "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
{
data: null,
className: "center",
defaultContent: ' V '
}
]
});
});
$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
</script>
}
currently I alerted its like this
alert($("data-Product_ID").val());
but it cant get the ID of that, hw can I do this ?
this is the html for table row
<tr class="even" role="row">
<td class="sorting_1">02</td>
<td>Current Accounts</td>
<td>Assets</td>
<td></td>
<td class=" center">
<a class="editor_view" href="#"> V </a>
</td>

Change your script to
$("#productTable").on('click', '.editor_view', function() {
var ID = $(this).closest('tr').find('td').eq(0).text();
alert(ID);
});
Note that your dynamically generating the table rows so you need event delegation attached to an element that exists in the DOM when the view is first generated (i.e the element with id="productTable").

Below is my Data table.
table_low_stocks.dataTable({
"bLengthChange": true,
"processing": false,
// "serverSide": true,
"bPaginate": false,
"bInfo": false,
"iDisplayLength" : 5,
"bSort" : true,
"ajax": {
'type': 'POST',
'url': "<?=action('AdvertiserproductsController#postLowstockproducts')?>"
},
"columns": [
/* {"data": "sr_no"}, */
{"data": "product_name"},
{"data": "inventory"},
{"data": "update"}
] // set first column as a default sort by asc
});
This is how i am rendering the HTML (Datatable from Controller )
return Datatables::of($data)
->add_column('action','<a data-productid="{{$sr_no}}" class="label label-sm label-messages-btn update-product"> <i class="fa fa-pencil-square-o"></i> Update Stock </a>')
->make(true);
If you have seen above i have given data-productid="{{$sr_no}}" to a tag
so ultimately that is what you have to give anyhow,.
Now from the jquery part.what have done is .
$(document).on("click",".update-product", function(e){
e.preventDefault();
var getProductId = $(this).data("productid");
alert(getProductId);
});
and i got the product Id :-)
to give data attribute do like
data-productid="{{$sr_no}}"
and to get the data attribute u have to use
$(selector).data("productid");
Hope this is helpfull to you.

$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
Here you have used "editor_view" as ID and I can view it is set as a class, so it will not work. It should be like
$('.editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});

JS dataTable plugin: handling json format other than standard datatable format

I am new to Datatables and trying to figure out this problem.
I have a server which oupts json in certain format(see below).I cant change that on server side.
**Note: I am using link http://www.json-generator.com/j/cftupHnpbC?indent=4 to emulate my server response just for checking.
I have 2 problems
Since My json response doesn't have aaData: thing required by dataTable, I cant seem to initiliaze it.
Even if I add aaData: by hand to json just for checking, dataTable cant count total records.How I can set that manually ?Since I cant change output from server.
JSBIN LINK:
http://live.datatables.net/dasuyaf/1/edit
HTML:
<table id="example" class="display" width="100%">
<thead>
<tr>
<th> </th>
<th>ID</th>
<th>Name</th>
<th>Text</th>
</tr>
</thead>
<tbody></tbody>
</table>
JS:
$(document).ready( function () {
var table = $('#example').dataTable({
"sAjaxSource": "http://www.json-generator.com/j/cftupHnpbC?indent=4",
"aoColumns": [{
"mData": "id",
"mRender": function (data, type, full) {
return '<input type="checkbox" name="chkids[]" value="' + data + '">';
}
}, {
"mData": "id"
}, {
"mData": "name"
}, {
"mData": "text"
}],
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"fnDrawCallback": function (oSettings) {
console.log(this.fnSettings().fnRecordsTotal());
}
});
});
My Server Output: (cant change this)
[
{
"text": "Some text",
"name": "somedata",
"id": "89"
},
{
"text": "Some text",
"name": "somedata",
"id": "2"
},
{
"text": "Some text",
"name": "somedata",
"id": "12"
}
]

I suppose you could just request that JSON yourself, make an object out of it and pass it to your dataTable.
var aaData;
var table;
$(document).ready( function () {
$.ajax({
url: 'http://www.json-generator.com/j/cftupHnpbC?indent=4'
}).done(function(data){
aaData = data;
table = $('#example').dataTable({
"aaData": aaData,
"aoColumns": [{
"mData": "id",
"mRender": function (data, type, full) {
return '<input type="checkbox" name="chkids[]" value="' + data + '">';
}
}, {
"mData": "id"
}, {
"mData": "name"
}, {
"mData": "text"
}],
"bProcessing": true,
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"fnDrawCallback": function (oSettings) {
console.log(this.fnSettings().fnRecordsTotal());
}
});
});
} );
I removed bServerSide - I don't think there's any way you can make use of it if you can't change your server response. Also removed sServerMethod.