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);
Related
I am trying to refresh the data from my table, but I am not using ajax and that is why when I try to use table.ajax.reload() it is not working.
It gives me wrong json response since the way I am declaring my table is this:
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
So in another process I update the variable global_data, how to refresh the data?
Thanks
If you are using datatables you can destroy the data with the following line:
$ ('# mytable'). dataTable (). fnDestroy ();
and fill the table again with the data you want.
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});
In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}
DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}
This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?
I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.
fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.
You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.
$(document).ready(function () {
var dt = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": "api.php?t=clients",
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"columns": [{
"className": "details-control",
"data": null,
"defaultContent": " "
}, {
"data": "c_name"
}, {
"data": "c_number"
}, {
"data": "c_link"
}]
});
});
My code throw an error of SQL access violation when I included the following with
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [0] }
]
But if i remove it, everything works fine, basically I just want disable sorting for column 0
How do I achieve it.
Thanks!!
Change "aoColumnDefs" to "columnDefs"
"columnDefs": [{
'bSortable': false, 'aTargets': [0]
}]
make sure you include these script files:
http://code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
I have a dataTable where i populating some data but i need the sorting operation enabled on that table.But my sorting is not working.This is my code i have done so far.
$('#example').dataTable( {
"processing": true,
"serverSide": true,
aaSorting: [[2, 'desc']],
"ajax": url,
"columns": [
{"data" : "code"},
{ "data": "description"},
{ "data" : "mrpString"},
{ "data":"unitDescription"},
{ "data":"moq"}
],
"columnDefs": [
{
"targets": [ 0 ],
"visible": true,
"searchable": false,
"sortable" :false
},
{
"targets": [ 1 ],
"visible": true,
"searchable": true,
"sortable" :true
},
{
"targets": [ 2 ],
"visible": true,
"searchable": false
},
{
"targets": [ 3 ],
"visible": true,
"visible": true,
"searchable": true
},
{
"targets": [ 4 ],
"visible": true,
"visible": true,
"searchable": true
}
],
"aoColumnDefs": [
{ "bSortable": true, "aTargets": [0,1,2,3,4] }
] ,
"rowCallback": function( row, data ) {
$("td:eq(0)",row).html("<a href='"+data.url+"' target='_new'>"+data.code+"<//a/> ");
//alert(data.parentCategoryId);
/* $('td:eq(6)', row).html( '<input type="checkbox" name="selectedIds" value="'+data.id+'" />' ).attr("class","checkIds");
$('td:eq(0)',row).attr('id','_'+data.id); */
}
});
});
This is my code i have done searching is also working but i want sorting enanled ,somebody please help
I know it's an old post.. but check it out..
Server side means you are doing everything server side. On the server, whatever method that fetches the data for your table, is also responsible for the paging and sorting of your table. My sorting wasn't working.. then I realized that my server-side method wasn't doing the sorting! So.. in a nutshell, I added this to the server-side method or function responsible for providing data for my table (C#):
(Note: "data" is a list of objects for my data table)
var myJsonOrder = JsonConvert.DeserializeObject<List<DataTableOrder>>(Request.Params["JsonOrder"]);
// Sorting
if (myJsonOrder != null && myJsonOrder.Count > 0)
{
var firstOrder = myJsonOrder.FirstOrDefault();
switch (firstOrder.column)
{
case 1:
data = firstOrder.dir == "asc" ? data.OrderBy(x => x.TripName).ToList() : data.OrderByDescending(x => x.TripName).ToList();
break;
case 2:
data = firstOrder.dir == "asc" ? data.OrderBy(x => x.TripStartDate).ToList() : data.OrderByDescending(x => x.TripStartDate).ToList();
break;
case 3:
data = firstOrder.dir == "asc" ? data.OrderBy(x => x.NumTravelers).ToList() : data.OrderByDescending(x => x.NumTravelers).ToList();
break;
case 4:
data = firstOrder.dir == "asc" ? data.OrderBy(x => x.NumCardsAssigned).ToList() : data.OrderByDescending(x => x.NumCardsAssigned).ToList();
break;
}
}
There is other data available in the request, such as the columns and search query:
var myJsonColumns = JsonConvert.DeserializeObject<List<DataTableColumn>>(Request.Params["JsonColumns"]);
var myJsonOrder = JsonConvert.DeserializeObject<List<DataTableOrder>>(Request.Params["JsonOrder"]);
var myJsonSearch = JsonConvert.DeserializeObject<DataTableSearch>(Request.Params["JsonSearch"]);
Edit: Sorry, learning this as I'm going.. that column / order / search data is available on the server because in my AJAX call for dataTables, I am passing the data to the server:
inactiveTravelerDataTable = $("#inactive-traveler-list-data-table").dataTable({
"processing": true,
"serverSide": true,
"jQueryUI": true,
"searching": false,
"dom": 'rtipl',
"ajax": {
"url": '/Trip/JsonInactiveTravelerList/',
"data": function(d) {
d.TripId = $('#TripId').val();
d.JsonColumns = JSON.stringify(d.columns);
d.JsonOrder = JSON.stringify(d.order);
d.JsonSearch = JSON.stringify(d.search);
},
"type": "POST"
}
//.... Continued on...
Hope this helps somebody.
Regards,