my script
<script type="text/javascript">
$(document).ready(function() {
$('.all').dataTable( {
"bInfo": false,
"bProcessing": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[25, 50, 75, 100], [25, 50, 75, 100]],
"iDisplayLength": 25,
"bServerSide": true,
"sAjaxSource": "Get_Pmob_tra",
"bPaginate": true,
"oLanguage": {
"sProcessing": "<img src='gfx/ajax-loader.gif'>"
}
} );
} );
</script>
and I am using datatable class to process the files
I need to get a new value from html to the PHP with an ajax call
How can I do this?
Use fnServerParams, like this:
...
"sAjaxSource": "Get_Pmob_tra",
"fnServerParams": function (aoData) {
aoData.push({ "name": "myval", "value": $('#myselect :selected').val() });
},
"bPaginate": true,
...
This example gets the selected value of a selectlist with the id='myselect', and passes it as a parameter called 'myval'. In your server-side Get_Pmob_tra php code, get the parameter from the request:
Request.QueryString["myval"]
sorry that's not specifically PHP code, but you get the idea.
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 the jquery DataTables with CodeIgniter to display the data on the listing page. My query is that how can I change the class of the particulal field on basis of the condition.
I have a status field, if the status is enabled I want to add the class which shows the icon with enable status. If I disable it, then it will show the icon with disable status.
I am not able to change the class.
Here is the code.
This code is in my controller function which fetches the data.
function list_op_data() {
$this->datatables->select('om.op_id,om.is_status,om.op_name,om.op_address1,om.op_address2,cm.stCity,sm.stState,co_m.stCountryName ,om.op_pincode,om.op_contact_name,om.op_email,om.op_phone_no', false);
$this->datatables->join("country_master co_m", 'om.op_country=co_m.intCountryId');
$this->datatables->join("state_master sm", 'om.op_state=sm.intStateId');
$this->datatables->join("city_master cm", 'om.op_city=cm.intCityId');
$this->datatables->from('op_master om');
$this->datatables->where(array('om.is_deleted' => '0'));
$this->datatables->add_column('action', '<i class=" glyphicon glyphicon-ok"></i><i class="glyphicon glyphicon-pencil"></i> <i class="glyphicon glyphicon-trash"></i> ', 'op_id,is_status');
$data = $this->datatables->generate('json');
echo $data;
}
And jquery data tables code is
var tconfig = {
"processing": true,
"serverSide": true,
"ajax": {
"url": BASE_URL+"admin/op_master_details/list_op_data",
"type": "POST",
"data": "json"
},
"columnDefs": [
{
"searchable": false
}
],
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
"paginate": true,
"paging": true,
"searching": true,
"aoColumnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
},
{"bSortable": false, "aTargets": [12]},
{
"targets": [1],
"visible": false,
"searchable": false
},
]
};
var oTable = $('#operator_list_data').dataTable(tconfig);
Any help would be appreciated.
Thanks.
You need to use fnRowCallback. Add this to your initialisation code:
...
],
'fnRowCallback': function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Get the status form the row object
var status = aData[1];
// check the status
if(status == 'Yes'){
// add the class to the <tr>
$(nRow).addClass('glyphicon glyphicon-ok');
}
return nRow;
},
...
This will add the class glyphicon glyphicon-ok to the <tr> when status = 'Yes'. If you want to add the class to a different control, you will have to modify the addClass statement to use a different selector. e.g $(nRow).children('td')[3]).find(i).addClass()
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 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 }
]
});
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