Develop Reference

HTML DataTables render a function in the cell

I have a JavaScript function that creates the DataTable. For the first cell in each row, I want to render a vizualisation function (with 3Dmol.js library) and display the object in this cell. The 3Dmol.js requires a container where the function result should be placed (the element variable). I want to choose the current cell. I tried with $(this); but I get an error saying: "Uncaught error creating viewer: TypeError: div.getBoundingClientRect is not a function"
<script type="text/javascript">
var in_json = '{{ in_json }}'
$(document).ready(function () {
$('#fragmenterTable').DataTable({
'ajax': { url: in_json, dataSrc: 'data' },
"scrollX": true,
"scrollY": 200,
"autoWidth": false,
"columnDefs": [
{
"render": function ( data, type, row ) {
return function viz_frag(data) {
var glviewer = null;
data = data
let element = $(this);
glviewer = $3Dmol.createViewer(element, "gldiv");
glviewer.addModel(data,'mol2');
glviewer.setStyle({},{stick:{}});
glviewer.zoomTo()
glviewer.zoom(2,1000);
glviewer.render();
glviewer.setBackgroundColor(0xffffff);
};
},
"targets": 0
},
{ "visible": false, "targets": [ 3 ] }
]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
What am I missing? Thank you!

Data Table pagination not working,,

Having trouble with datatable's pagination. All data displays in single page. How do i limit the rows by 10?
JS code:
$(document).ready(function() {
$.ajax({
url : 'views/logs/reldata.php' ,
// type : "GET";
success : function(data)
{
// alert(data);
$("#media_tbl").empty();
$('#media_tbl').DataTable( {
'searching': true,
"destroy": true,
"processing": true,
"serverSide": true,
"paging": true,
"length": 10,
"ajax" : 'views/logs/reldata.php',
"columns": [
{ "data": "act_type" },
{ "data": "action" },
{ "data": "actor" },
{ "data": "date_created" }
]
});
// setInterval( function () {
// $('#media_tbl').DataTable().ajax.reload();
// }, 30000 );
}
});
});
PHP code:
$dispo = array(
'draw' => 9,
'recordsTotal' => (int)$coun['cou'],
'recordsFiltered' => (int)$coun['cou'],
'data' => $disp
);
$dispo = json_encode($dispo);
print $dispo;
Having trouble with datatable's pagination. All data displays in single page. How do i limit the rows by 10?
Thank you for help :D

IF else like at datatable jquery

How could I perform If else like method in datatable? The variable 'data' returns the value of the variable, which is correct, but if it is blank, it would return the word "from1", "from2" which is supposed to be the value of the variable "from1". Am I doing the right approach or do you have any suggestion as workaround in this problem? thank you for your answers. here is my code:
var table = $('#records').DataTable({
type: 'post',
"ajax": "getHumanTrainings",
"bPaginate": true,
"bProcessing": true,
"pageLength": 10,
"columns": [{
mData: 'tdesc'
}, {
data: "fdDateFrom2",
defaultContent: 'from1'
}, {
data: "fdDateTo2",
defaultContent: 'from2'
}, {
data: "fcTrainor2",
defaultContent: 'train1'
}, {
mData: 'dur'
}]
});

I'd use the render option for the column data that you have, its much more flexible in terms of wanting something to be displayed by default.
var table = $('#records').DataTable({
type: 'post',
"ajax": "getHumanTrainings",
"bPaginate": true,
"bProcessing": true,
"pageLength": 10,
"columns": [{
mData: 'tdesc'
}, {
data: "fdDateFrom2",
render: function(data, type, row) {
// Check if blank
if (data === "") {
return row[<index for from1>]; // Just use the index for from1
}
// If not blank display data normally
return data;
}
}, {
data: "fdDateTo2",
render: function(data, type, row) {
// Check if blank
if (data === "") {
return row[<index for from2>]; // Just use the index for from2
}
// If not blank display data normally
return data;
}
}, {
data: "fcTrainor2",
render: function(data, type, row) {
// Check if blank
if (data === "") {
return row[<index for train1>]; // Just use the index for train1
}
// If not blank display data normally
return data;
}
}, {
mData: 'dur'
}]
});
I've left comments to give you a guide since I'm not familiar with your data, I would suggest printing out your row first over at render so you'd know which index to use.

Refresh / Redraw Datatables over function

and i call the datatable over the function.
Here is my function :
function drawTable(yearParameter) {
var oTable = $('#horizontal-monthly').DataTable({
processing: true,
serverSide: true,
ajax: {
url : '{!! route('adm1n.laporan-bulanan-data') !!}',
data : function (d) {
d.year = yearParameter;
}
},
columns: [
{ data: 'B_01', name: 'B_01', sortable: false },
{ data: 'B_02', name: 'B_02', sortable: false }
],
dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
});
}
And i have event change to call my function above and pass parameter on it.
How to reload the datatables? Cause right now datatables won't reload.
I try to use :
oTable.destroy();
oTable.draw();
It make datatables functionality not work. Like search, pagination etc.
Edit
Here is my change event :
$('#year-value').on('change', function(e) {
var yearParam = $('#year-value').val();
drawTable(yearParam);
});
How to handle that?
Thank you??

Please try
oTable.clear();
oTable.draw();
Also, can I see your change event? I can help you re-add the rows
UPDATE 2
Ok, you can't call DT constructor more than once. First thing what you want to do is to save DT object as global object.
function drawTable() {
if(!oTable)
{
oTable = $('#horizontal-monthly').DataTable({
processing: true,
serverSide: true,
ajax: {
url : '{!! route('adm1n.laporan-bulanan-data') !!}',
data : function (d) {
d.year = filterYearParam;
}
},
columns: [
{ data: 'B_01', name: 'B_01', sortable: false },
{ data: 'B_02', name: 'B_02', sortable: false }
],
dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
});
}
}
else
{
oTable.ajax.reload().draw();
}
$('#year-value').on('change', function(e) {
filterYearParam = $('#year-value').val();
drawTable();
});
Try this, and then I can try making your year to work.

How to refresh datatable list jquery?

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.