I've created a dataTable. I'm receiving about 13 data from the database. I've also declared a global variable and assigning it's value inside the dataTable in mRender event. But, the problem is I cannot bring it out of that. This is how I've tried:
var total_amount = 0;
function year_month(year_month) {
jQuery("#table").dataTable({
"sAjaxSource": "request-db.php?mode=dataTable&year_month=" + jQuery("#year_month").val(),
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function(data, type, row) {
total_amount = row[14];
alert(total_amount);
return '' + row[0] + '';
}
}
]
});
}
alert("total"+total_amount);
});
In the first alert, I'm getting the correct value, but in the second alert I get 0(to which I've initialized). How can I get that outside the dataTable? What should I do?
Related
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
How do I get the value of checklistclient_id column and insert into the onchange event at the last column?
When the change of checkbox value occurs, it brings the checklistclient_id to the togglecheck function.
function loadClientChecklist(url){
var rt_hash = decodeUrl(url);
var id = rt_hash[0].replace("id=", "");
$.ajax({
type: 'POST',
url: '../model/get_set_ajax2.php?req=21',
data: 'cid=' + id,
success: function (results) {
console.log(results);
$('#clchecklist_tab').DataTable({
"paging": false,
"searching": true,
"info": false,
"ordering": false,
"aaData": $.parseJSON(results),
"aoColumns": [
{"mData": "checklistclient_id", "visible": false},
{"mData": "description"},
{"mData": "is_checked", "mRender": function (data) {
return '<input type="checkbox" onchange="togglecheck('+ checklistclient_id +')" value='+data+'/>';
}
}
]
});
}
});
You should use row created callback Then you can set id to trs.
"createdRow": function ( row, data, index ) {
$(row).data("checklistclient_id", checklistclient_id );
}
Now, you know all id of tr. Lets say that your check box has class called cb
$("#clchecklist_tab" ).delegate( ".cb", "change", function() {
togglecheck($(this).closest("tr").data(checklistclient_id))
})"
I am using DataTable Jquery for bind list of records. I face below issue.
I am using jquery model popup for addnew and update record in MVC 4.0 Razor with no submit button only using ajax function. When I am click on "save" button and I want to update list with latest changes, but it can not. My code as below.
For Index page for list bind.
<script type="text/javascript">
$(document).ready(function () {
if (fnServerObjectToArray) {
var oTable = $('.datatable').dataTable({
"bJQueryUI": true,
"sScrollX": "",
"bSortClasses": false,
"aaSorting": [[0, 'asc']],
"bAutoWidth": true,
"bInfo": true,
"sScrollY": "100%",
"sScrollX": "100%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"bRetrieve": true,
"bProcessing": true,
"sAjaxSource": $('.datatable').attr('data'),
"aoColumns": [
{ sType: 'string' },
{ sType: 'string' },
{ sType: 'string' },
{ sType: 'string' },
{ bSortable: false }
],
"fnServerData": fnServerObjectToArray()
});
}
});
fnServerObjectToArray = function () {
return function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for (var i = 0, iLen = json.aaData.length; i < iLen; i++) {
var inner = [];
inner.push(json.aaData[i].Name);
inner.push(json.aaData[i].Price);
inner.push(json.aaData[i].Phone);
inner.push(json.aaData[i].Email);
inner.push("<a title='Edit Place' class='EditDialogPlacesToStay' href='/placetostay/" + json.aaData[i].Id + "/edit'><img src='/Content/images/icons/small/grey/pencil.png' title='Edit' /></a> <a class='DeleteConfirm' href='/placetostay/" + json.aaData[i].ID + "/delete'><img src='/Content/images/icons/small/grey/trashcan.png' title='Delete' /></a>");
a.push(inner);
}
json.aaData = a;
fnCallback(json);
},
"error": function (error) {
}
});
}
}
</script>
On save button in success function I call the location.reload().
But I could not bind the latest changes of records means List is not refreshed.
Please help me for same.
Wrap the datatable initialization into a function, like initDataTable(), and add the option bDestroy to the settings :
function initDataTable() {
if (fnServerObjectToArray) {
var oTable = $('.datatable').dataTable({
"bDestroy" : true, //<-- add this option
"bJQueryUI" : true,
...
//anything as above
});
}
}
$(document).ready(function () {
initDataTable();
});
when you want to refresh / reload, like by a click on a button :
<button id="refresh">Refresh</button>
$("#refresh").click(function() {
initDataTable();
});
here is a demo -> http://jsfiddle.net/cxe5L/
To avoid the cache-issue
jQuery dataTables has hardcoded cache : true into its AJAX-calls. You have "sAjaxSource": $('.datatable').attr('data'). I assume data holds the path to an external resource, like /data/getdata.asp or similar? Add a timestamp as param to that resource, like
sAjaxSource : $('.datatable').attr('data')+'?param='+new Date().getTime()
so the sAjaxSource becomes on the form
/data/getdata.asp?param=1401278688565
This is basically the same thing jQuery is doing, when cache : false is set on a AJAX-request.
location.reload() will refresh the page content and your
$(document).ready(function () {}
is executing again instead of getting the latest changes. Check weather your database has new records or not.
Is it possible to change datatable column settings value on fly.I need to hide some columns dynamically while invoking some methods.Already try something like this:
var columns = [{ "bVisible": true, "sTitle": "Date" },
{"bVisible": true, "sTitle": "Time" }];
var myTable= $('#myTable').dataTable({
"bPaginate": false,
"bFilter": true,
"sScrollY": "150px",
"bRetrieve": true,
"bProcessing": false,
"bServerSide": false,
"aoColumns": columns,
'bAutoWidth': false,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
},
});
for(var i=0; i<10; i++ {
myTable.fnAddData(['xxxx','yyyy']);
}
$("#hideDate").change(function() {
myTable.fnSettings().aoColumns[0].bVisible = false;
});
After calling hideDate change method I am getting this js error
TypeError: o.aoColumns[iVis] is undefined
nThs[i].style.width = o.aoColumns[iVis].sWidth;
Please give some idea to fix this problem.
I need to change datatable columns visibility dynamically.
Regards,
Prasath M
There is a datatables plugin that has been created for this, ColVis. If you don't want to use the plugin, you could look at the source code and see how they did it.
I'm trying to create a row inside my datatable that increments +1 each row. I've been told the easiest way to do this would be using fnRender. Now I've used fnRender to change data that's already in a column from the serverside processor, but never to create a new column alone.
Any help would be awesome!
Here's my current code:
oTable = $('#testingz').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'desc'] ],
"sDom": '<""l>rt<"F"fp>',
"sAjaxSource": "server_processing.php",
"aoColumnDefs": [
{
"fnRender": function ( o, val ) {
return '' + o.aData[0] + '';
},
"aTargets": [ 0 ]
}
]
});
Do you mean something like this: http://datatables.net/release-datatables/examples/api/counter_column.html