I sort the data in the table by ORDER BY in SQL request. But when I apply DataTables on my table, it changes the sorting completely...I got "bSortable":false in all columns...Does anybody know what is causing this? :( The DataTable code looks like this:
oTable = $('#tabulkaKalk').dataTable({
"bJQueryUI": true,
"sDom": '<"H"f>rtS<"F"i>',
"sScrollY": iHeight,
"bFilter": false,
"bAutoWidth": true,
"bPaginate": false,
"bRetrieve":true,
"aoColumns": [
{ "sType": "czech", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false }
]
});
Related
i have issue on use treeTable while reload data and after save and update data form
$(document).ready(function() {
const datajson = <?php echo $data_json ?>;
$('#tablejson').treeTable({
"data": datajson,
"collapsed": true,
"responsive": true,
"lengthChange": true,
"autoWidth": false,
"fnDrawCallback": function() {
$('[data-toggle="tooltip"]').tooltip();
},
"aLengthMenu": [
[10, 50, 100, -1],
[10, 50, 100, "All"]
],
"iDisplayLength": 10,
"columns": [{
"data": "nama_module",
},
{
"data": "controller",
},
{
"data": "function",
},
{
"data": "nm_group",
},
{
"data": "label",
},
{
"data": "btn"
}
],
"order": [],
});
$('#btn-reload').click(function() {
$('#tablejson').dataTable().api().ajax.reload();
});
});
i try to click button for reload tabel use $('#tablejson').dataTable().api().ajax.reload(); but not working, this is happen while i use treeTable, if i use datatable only its work for reload or refresh table.
does anyone have the same case with me ? thanks
finally, i found a solution in my case, i use code like this
$('#btn-reload').click(function() {
$('#tablejson').DataTable()
.order([2, 'desc'])
.draw();
});
thanks....
I am using Codeigniter and data table. I am displaying the list. Now what I am doing is, I have to display all the list to the role id 1 and limited access on role id 2.
I tried in the controller which is working
if($this->session->userdata['login_session']['role']==1 ){
$action='<sel ect></select>';
}
else{
$action='';
}
View
This is also working.
<table id="emp-leadList">
<thead>
<tr>
<th>Name</th>
<?php if($this->session->userdata['login_session']['role']==1 ){ ?><th>Action</th><?php }?>
</tr>
</thead>
<tbody></tbody>
</table>
But I am getting the issue on the script. I want to know what code I have to use in the script
JS
$('#emp-leadList').DataTable( {
language: {
sLengthMenu: "Show _MENU_",// remove entries text
searchPlaceholder: "Search",
emptyTable: "No record found",
search:""
},
"autoWidth": false,
"ordering": false,// remove sorting effect from header
"processing": true,
//"serverSide": true,
"order":[],
"scrollX": true,
//"bInfo" : false,
"pageLength": 25,
"paging": true,
//"deferRender": true,
// "bDeferRender": true,
"ajax": {
"url" : baseUrl + "/Customer_control/emp_list",
"type" : "POST"
// "dataSrc": ""
},
"columns": [
{ "data": "name" },
{ "data": "action" }
],
"columnDefs": [
//{ width: '3%', targets: 0 },
{ width: '13%', targets: 0 },
{ width: '8%', targets: 1 }
]
});
Would you help me out in this?
I am doing export functions using DataTable for a report.
I have created the example here:
https://jsfiddle.net/hn2gcken/140/
I have user input value in W2, which also updates the value of 4Tax. I have created a hidden span tag to get those values when I insert. But the values are still not showing in the excel/PDF format.
Jquery
var table = $('#example').DataTable( {
lengthChange: false,
dom: 'Bfrtip',
"bPaginate": false,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
buttons: [ 'excel', 'pdf']
} );
table.buttons().container()
.appendTo( $('div.eight.column:eq(0)', table.table().container()) );
$("#w2").keyup(function () {
if (!isNaN(this.value) && this.value.length != 0)
{
$("#w2-span").text($(this).val());
$("#4tax-span").text($(this).val());
$("#4tax").val($(this).val());
$("#w2").attr('value', $(this).val())
}
});
I would be very grateful if anyone could help me.
Thanks!
I've have many processes using the same data that gets regular updates while a user is on a page. Now I want to use datatables to show this data.
I also use the ColReorder plugin.
The problem is that I don't understand how I can force datatables to 'reload' this local var with new data.
there is is also a bunch of definitions in the "aoColums" setting, using some of the datafields for images and so on.
I changed some of the data in the dat var. The tried to force datatables to put it in the table. No luck. I can't find a decent example or function in the api to use.
if I try to use oTable.fnClearTable() and the oTable.fnAddData(data) the data gets loaded, but somehow the ColReorder is not aplied.
myTable = $('#myTable').dataTable({
"aoColumns": [ ... ],
"aaSorting": [[1, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
Any ideas?
EDIT
I've made a working jsFIddle with the whole problem explained. Take a look and have a go!
I read about your problem....i take another approach to your problem(it's always about dom manipulation xD)...my anwer it's not the smartest, but i think it works.
I put datatables manipulation inside a function, and add a div no the table
Then i call that function
On update i empty the div and add the same html that table have before datatbles manipulation and fill
Then a call the function to draw the whole datatables again, in that way ColReorder plugin works with the updated data.
PS: Here is the updated fiddle for more details : http://jsfiddle.net/aKuHM/5
Now the table looks like this:
<div class="Example" id="Example">
<table id="myTable" class="datatable">
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
And your JS its loading on the head and looks this way:
data = [
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
];
function Saludos(){
$(function(){
myTable = $('#myTable').dataTable({
"aoColumns": [
{"sTitle":"col0", "bSearchable": false, "bVisible": true},
{"sTitle":"col1", "bSearchable": false, "bVisible": true},
{"sTitle":"col2", "bSearchable": true, "bVisible": true},
{"sTitle":"col3", "bSearchable": true, "bVisible": true},
{"sTitle":"col4", "bSearchable": true, "bVisible": true},
{"sTitle":"col5", "bSearchable": false, "bVisible": true},
{"sTitle":"col6", "bSearchable": true, "bVisible": true},
{"sTitle":"col7", "bSearchable": false, "bVisible": true},
{"sTitle":"col8", "bSearchable": true, "bVisible": true,
"mRender": function (data, type, row){
return '<b><i>'+ row[8] +'</i></b>';
}
},
{"sTitle":"col9", "bSearchable": false, "bVisible": false},
],
"aaSorting": [[8, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
$('#updatebutton').click(function(){
updateTable();
});
});
}
Saludos();
function updateTable(){
data[1][8] = "even bolder";
$('.Example').empty();
$("#Example").html("<table id='myTable' class='datatable'><thead></thead> <tbody></tbody><tfoot></tfoot></table>");
Saludos();
console.log(data);
}
I've been looking around on the net for hours about this save scroll position for DataTables, but without any luck. At least not for my case.
According to datatables, to save the state of the scrollbar I need this line of code:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": "200px",
"sAjaxSource": "media/data/2500.txt",
"sDom": "frtiS",
"bDeferRender": true,
"bStateSave": true
} );
} );
But since I'm not having any text file with the data which I can parse it's not working. I'm fetching arrays in the table with PHP and MYSQL.
The "bStateSave": true does save every user input like filtering and sorting, except for the scrollbar.
Does anyone know how to solve this?
EDIT
Ok somehow I managed to get this working. It seems I had something on true, which shouldn't be. Now, with this "sDom" the savestate of scrolling works, but my GUI is gone...
EDIT
My initiation code is:
<!-- DATATABLES ENABLE INIT -->
<script>
<?php include ('js/datatables/ordernumhtml.js');?>
<?php include ('js/datatables/ordercurrency.js');?>
<?php include ('js/datatables/dataTables.scroller.min.js');?>
$(document).ready( function () {
$('#table1').dataTable( {
"sDom": "frtiS",
"bDeferRender": false,
"bStateSave": true,
"bAutoWidth": true,
"bInfo": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"bScrollAutoCss": true,
"bScrollInfinite": false,
"sScrollY": "350px",
"bJQueryUI": true,
"bProcessing": true,
"aoColumns": [
{ "sType": "num-html" },
{ "sType": "numeric" },
null,
null,
null,
null,
null,
null,
{ "sType": "currency" },
null,
{ "bSortable": false }
]
} );
} );
</script>
And the solution was to rewrite the line:
"sDom": "frtiS", to:
"sDom": '<"H"fr>t<"F"iS>',
The "H" and the "F" represents the header and the footer for the jQueryUI.
A detailed description of the sDOM usage can be found here:
http://datatables.net/usage/options#sDom
The solution to save the scroll state is to set stateSave to true. To make this work one also needs to use dataTables.scroller.js
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/2500.txt",
deferRender: true,
dom: "frtiS",
scrollY: 200,
scrollCollapse: true,
stateSave: true
} );
} );
Check this : Scroller State Saving