Datatables reload on change event

Datatables reload on change event - javascript

I have a html drop down that initially populates and shows the data table. The data is coming from a json array. Once the drop down is changed i'm getting the reinitialise error and having trouble fixing it.
I've tried the table.ajax.reload and also the table.fnReloadAjax(); I work with datatables off an on so not the greatest with them.
Here is the code:
function Population() {
var table = $('#Population').dataTable();
$("#quickStats").change(function () {
var optionValue = $("#quickStats").val();
console.log(optionValue);
if (optionValue == 1) {
$("#display").append('<table cellpadding="0" cellspacing="0" border="0" class="display" id="Population">' +
'<thead><tr><th>Demographic</th><th>Total</th></thead>'
+ '</table>');
$('#Population').dataTable({
"data": usPopulation,
"bJQueryUI":true,
"columns": [
{ "data": "Demographic" },
{ "data": "Total" }
],
});
}
table.ajax.reload();
});
}

Try destroying the previous one before creating new:
$('#Population').dataTable().fnDestroy();
$('#Population').dataTable({
"data": usPopulation,
"bJQueryUI":true,
"columns": [
{ "data": "Demographic" },
{ "data": "Total" }
],
});
or do like this:
var table = $('#Population').dataTable({
"data": usPopulation,
"bJQueryUI":true,
"columns": [
{ "data": "Demographic" },
{ "data": "Total" }
],
});
table.draw();

Related

Icons not appearing

Need to populate table rows with Edit & Delete Icons. Can get buttons on each row but unable to get icons.
Populating table with data with JSOn
var jsonResponse = JSON.parse(data);
var table = $('#register-data').DataTable({
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{
"data":null,
"defaultContent": "<button class='btn-Edit'><i class="fa fa-edit"></i>Edit</button>"
},
],
"order": [[1, 'dsc']]
});
Font awesome called in index.html file
Any advise would be great

You have a syntax error like this:
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": null,
"defaultContent": "<button class='btn-Edit'><i class='fa fa-edit'></i>Edit</button>"
}
],
"order": [[1, 'dsc']]
});

As #ADyson pointed out there was a typo in the 'defaultContent' object I have your example with some dummy data only additional changes are consmetic
$(document).ready(function() {
var data = '{"data":[{"ReleaseID":1,"ReleaseName":"Jam"}]}'
var jsonResponse = JSON.parse(data);
var table = $('#register-data').DataTable({
"data":jsonResponse.data,
"columns": [
{ "data": "ReleaseID", "title": "ReleaseID" },
{ "data": "ReleaseName", "title": "ReleaseName" },
{ "data": null, "title": "Action",
"defaultContent": "<button class='btn-Edit'><i class='fa fa-edit'></i>Edit</button>"
}
],
"order": [[1, 'dsc']]
});
} );
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="register-data">
</table>
</div>
Documentation:
Jquery Table API

Jquery Datatable - Pulling data from server - how to use value as a attribute

I have a simple code to pull data using ajax in my datatable:
$(document).ready(function() {
$('#datatable').dataTable( {
"pageLength": 50,
"ajax": "/test/pull/",
"columnDefs": [ {
"targets": 6,
"data": null,
"defaultContent": "<button type=\"button\" class=\"btn btn-success btn-sm\" onclick>Click</button>"
} ],
"columns": [
{ "data": "a" },
{ "data": "b" },
{ "data": "c" },
{ "data": "d" },
{ "data": "r" },
{ "data": "f" }
]
} );
I am pulling from server one more column - g and I would like to add this value as a new attribute ( for example ID ) to a button named "Click".
Was trying to find anything in google but unsuccessfully - will be thankful for your support
Thanks in advance,

How to multiply Data in Datatables?

How do I multiply Data in Datatables ?
I have Datatables and javascript that look like this:
$('#xxdata').DataTable( {
"destroy": true,
"processing": true,
"ajax": {
url : "xxreport.php",
type : 'GET',
data : {
datedari : SplitRange[0].trim(),
datesampai : SplitRange[1].trim()
}
},
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit"}
]
} );
I want to multiply data in { "data": "profit"} maybe like
this { "data": "profit" * 0.7}
Can I change data in datatables as I want? Or can anyone give other solutions?
Thank You.

You can use the columns.render option (documented here) to do this.
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit",
"render": function (data) {
return data * 0.7;
}
}
]
In this case, data in the function signature represents the data for the cell. There are other options that can be passed into the function, but in your case these do not need to be included since this is such a simple operation. See the documentation link if you ever want to expand to a more complicated rendering function

You must add a render to your column, something like this:
{ "data": "profit", "render": renderMyProfit}
and you should have the rendering function declared before you call the .DataTable() function.
var renderMyProfit = function (data, type, row, meta) {
var renderContent = "<div>*</div>";
return renderContent.replace("*", row.profit * 0.7);
};

Add Index column to dataTable

Suppose I have the following json to display in my DataTable:
// JSON structure for each row in this example:
// {
// "engine": {value},
// "browser": {value},
// "platform": {value},
// "version": {value},
// "grade": {value}
// }
$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
} );
What I want is, Add an Index Column to this data table for number the row.
Something like this :
"columns": [
{"data" : "Index"}, <------- this should number my rows
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
Note: I don't have any Index as data passed in my Json(Although I can do that, is there any better solution to handle this in my Javascript itself? )
Help appreciated..!

Try this.
"render": function ( data, type, full, meta ) {
return meta.row + 1;
} },

The concept is that you have to create the initial "Index" values either in javascript or in the server. The values can be zero or just empty strings or whatever (there is no need to calculate a counter or something). For example you can create an index column in javascript after you have received the data:
for (var i=0; i<data.length; i++){
data[i].index = 0;
}
So now that you have the index column in your data you declare it as the first column of your table:
$('#example').dataTable( {
.....
"columns": [
{ "data": "index" },
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
} );
Now the index values are all 0. To create the real index values that will be shown in the table you need to add an event handler that listens to the ordering and searching of the table. On these events the real index values will be calculated as described in the
datatables example:
datatable_object.on( 'order.dt search.dt', function () {
datatable_object.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
When the table is searched or ordered (ordering is done by default when the table is created - see default value of the order option), the innerHtml of the "Index" cells will be calculated based on the index of the row.

Just add the code below to your datatables
{ 'data': 'id', defaultContent: '' },
"columnDefs": [ ////define column 1 , make searchable false
{
"searchable": false,
"orderable": false,
"targets": 0
},
Below is the updated code:
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{ 'data': 'id', defaultContent: '' },
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" },
"columnDefs": [ ////define column 1
{
"searchable": false,
"orderable": false,
"targets": 0
},
]
});
And the following line will add number to your id(index) column:
if (t.data().length != 0) {
t.on('order.dt search.dt', function () {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
t.cell(cell).invalidate('dom');
});
}).draw();
Live example: http://live.datatables.net/woboviqi/2/edit

Need to use DT_RowIndex for indexing rows. Like this - ## Heading ##
"columns": [
{ "data": 'DT_RowIndex'}, // row index
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]

You can use unshift()
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
].unshift({"data" : "Index"})
Or by using an temp array
var cols = [{
"data": "engine"
}, {
"data": "browser"
}, {
"data": "platform"
}, {
"data": "version"
}, {
"data": "grade"
}];
cols.unshift({
"data": "Index"
})
....
"columns": cols

Have a look on this URL: Data table Index column
It might help you.

Here is my code you can refer to:
My DataTable is complete custom.
I'm fetching data from the database using Ajax and CodeIgniter.
HTML
<table width="100%" class="table table-striped table-hover" id="table_id_dataTable">
<thead>
<tr>
<th>Sr No</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Sr No</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
JS Script
var temp_table = $('#table_id_of_dataTable').DataTable({
"language": {
"zeroRecords": "No records found."
},
"ajax": {
"type": "POST",
"url": "<?php echo base_url('Controller/method'); ?>"
},
"responsive": true,
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": 0
}
],
"order": [
[1, 'asc']
],
"columns": [
{ "data": null }, // <-- This is will your index column
{ "data": "column_2_element_name_given_in_controller" },
{ "data": "column_3_element_name_given_in_controller" },
{ "data": "column_4_element_name_given_in_controller" },
{ "data": "column_5_element_name_given_in_controller" }
]
});
// Here we create the index column in jquery datatable
temp_table.on('order.dt search.dt', function() {
temp_nuggets_table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
Hope it helps!

That is simple... This work for me.
Cell: function ( data, type, full, counter ) {
return data.index + 1
}

enter link description here
Try this:
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{
"data": null, "render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
});
table.on('order.dt search.dt', function () {
table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();

enter link description here
Try this:
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{
"data": null, "render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
});

jquery datatable gives error when rendering

I'm trying to fill JQuery Datatable with data via ajax:
HTML
<table id="table-productMaterials">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Quantity</th>
<th>Status</th>
</tr>
</thead>
</table>
Javascript
$(document).ready(function () {
var options = {
"processing": true,
"ajax": {
"url": "ProductMaterials.ashx?action=get",
"type": "POST",
"data": {
"productId": $('#product_id').val()
},
"columns": [
{ "data": "Id" },
{ "data": "MaterialName" },
{ "data": "Quantity" },
{ "data": "Status" }
]
},
};
table = $('#table-productMaterials').DataTable(options);
});
Generic handler output:
{"data": [{"Id":1,"Quantity":15.00,"Status":"1","MaterialName":"Iron","ProductName":"French onion soup"},{"Id":3,"Quantity":14.00,"Status":"1","MaterialName":"Nails","ProductName":"French onion soup"}]}
error message when reloading data:
DataTables warning: table id=table-productMaterials - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
I refered to this page and read an example but can't seem to get this resolved. What I'm making wrong?

You have to place the columns property outside of the ajax property like this:
$(document).ready(function () {
var options = {
"processing": true,
"ajax": {
"url": "ProductMaterials.ashx?action=get",
"type": "POST",
"data": {
"productId": $('#product_id').val()
},
},
"columns": [
{ "data": "Id" },
{ "data": "MaterialName" },
{ "data": "Quantity" },
{ "data": "Status" }
]
};
table = $('#table-productMaterials').DataTable(options);
});
Then it will work.

Develop Reference

JavaScript is the programming language of the Web.

Datatables reload on change event - javascript

Related

Icons not appearing

Jquery Datatable - Pulling data from server - how to use value as a attribute

How to multiply Data in Datatables?

Add Index column to dataTable

jquery datatable gives error when rendering

Categories

Resources