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!
Related
I want to call a function that processes my datatable at the serverside when I close a bootstrap modal.
This is my jquery
$('#launch').on('hidden.bs.modal', function () {
fill_datatable();
console.log(123);
});
console.log(333);
function fill_datatable(filter_status = ''){
var dataTable = $('#dataTable2').DataTable({
"processing" : true,
"pageLength": 25,
"columnDefs": [
{ "searchable": true, "targets": 0 }
],
"serverSide" : true,
"createdRow": function(row, data, index) {
switch (data[8]) {
default:
$(row).css('background-color', 'white');
}
},
"order" : [],
"ajax" : {
url:"ajax/fetch.php",
type:"POST",
data:{ filter_status:filter_status }
},
"columnDefs": [
{ "width": "40%", "targets": 3,
"className": "text-justify", "targets": 3,
"searchable": true, "targets": 3,
}
]
});
}
When the modal closes I can see 123 in my console but it doesnt call the fill_datatable() function, which is placed directly outside of the on() method.
Note that the fill_datatable() function works because it processes the table on page load, but I want it to refresh after an action is done in the modal so I see the latest changes.
Destroy the dataTable method before calling the function, using $('#dataTable2').DataTable().destroy();
Try define function fill_datatable() before $('#launch').on('hidden.bs.modal', function () {}.
I have this php script in a file named qnams.php that returns JSON:
include ("../include/database.php");
include ("../include/sessions.php");
$select = "SELECT column1,column2,column3,column4
FROM qnamtable WHERE USER = '$username'";
$query = mysqli_query($dbc, $select) or die(mysqli_error());
$out = array();
while ($row = $query->fetch_array()) {
$out[] = $row;
}
echo json_encode($out);
mysqli_free_result($query);
I found different posts on how to add the JSON directly into the dataTable, but was a little confused on how to proceed.
On my main page, I have this function at the bottom of the page:
$(function() {
$('#example1').dataTable({
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sScrollY": "auto",
"sScrollCollapse": true,
"bAutoWidth": true
});
});
What do I need to add to this function to include the JSON with all the headers and data?
You need to use the ajax option of Jquery Datatables
ajax : {
url: 'the/path/to/php/file/with/jsondata'
}
You can use like below,
$(function() {
$('#example1').dataTable({
"processing": true,
"serverSide": true,
"ajax": "qnams.php" //set your php file location
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sScrollY": "auto",
"sScrollCollapse": true,
"bAutoWidth": true
});
});
The html should be like below, Make sure the id should be example1
Set all the headers as below easily.
<table id="example1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
</tr>
</thead>
<tfoot>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
</tr>
</tfoot>
</table>
Check more information from here
First I would say you should use fetch_assoc, not fetch_array(). fetch_array() will include both the associated and the indexed array :
[{"0":"x","column1":"x","1":"y","column2":"y"}]
we just need
[{"column1":"x","column2":"y"}]
Then here is a fully automated script for populating a
<table id="example1"></table>
with any JSON as long as it is wellformed (as your PHP script seems to do) :
$.ajax({
url : 'qnams.php',
dataType : 'json',
success : function(json) {
//build the column definitions for titles and data-indexes
var columns = [];
Object.keys(json[0]).forEach(function(column) {
columns.push({ title: column, data: column })
})
$('#example1').dataTable({
data : json,
columns : columns,
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sScrollY": "auto",
"sScrollCollapse": true,
"bAutoWidth": true
})
}
});
I assume you are using 1.10.x of dataTatables.
All of the other answers here were helpful, however in the end, I merely needed to acquire a recent version of jQuery DataTables. I was using newer code with an older template and that was a main issue affecting my results.
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 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