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 () {}.
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 trying to make a column as hyperlink with datatable but no success.
function successCallback(responseObj){
$(document).ready(function() {
$('#example').dataTable( {
"data":responseObj ,
"bDestroy": true,
"deferRender": true ,
"columns": [
{ "data": "infomation" },
{ "data": "weblink" },
]
} );
} );
}
I need the weblink to display the link and be an hyperlink in that column so users can click and be redirected to another page. I looked into render but with less information there on links, i can't succeed to do it.
I also looked into this example but it wasn't very helpful.
Use columns.render API method to dynamically produce content for a cell.
$('#example').dataTable({
"data": responseObj,
"columns": [
{ "data": "information" },
{
"data": "weblink",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
}
]
});
See this example for code and demonstration.
If you are looking to add link based on other column data then can use the below approach.
$('#example').dataTable({
"data": responseObj,
"columns": [
{ "data": "information" },
{
"data": "weblink",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
}
]
});
I have just changed the render function. data refers to only current column data, while row object refers to entire row of data. Hence we can use this to get any other data for that row.
$('#example').dataTable( {
"columnDefs": [ {
"targets": 0,
"data": "download_link",
"render": function ( data, type, full, meta ) {
return 'Download';
}
} ]
} );
From the documentation. It is quite clear and straightforward to me, what is it specifically that you do do not understand? What errors do you see?
For a more complete example, see here
in my example I make the column cell fully clickable and not just the text inside the column. I think it will be useful for someone. use bootsrap 5
$(document).ready(function() {
$('#datatable').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('get.profiles') !!}',
columns: [
{
data: 'id',
name: 'id',
render : function(data, type, row, meta) {return'<a class=" d-inline-block fw-normal w-100 h-100 pe-auto" href="profiles/edit/' + row.id + '">' + row.id + '</a>';},
},
{
data: 'name',
name: 'name',
render : function(data, type, row, meta) {return'<a class="d-inline-block fw-normal w-100 h-100 pe-auto" href="profiles/edit/' + row.id + '">' + row.name + '</a>';},
},
]
});
});
in your css file add
td{
height: 100%;
overflow: visible;
}
Script. I want to send data to php page:
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"type": "POST",
"sAjaxSource": "abcd.php",
"data": [
{ game:"Football" },
{ game:"Baseball" }
],
"aoColumns": [
{ mData: 'name' } ,
{ mData: 'count' }
]
});
});
</script>
abcd.php (Data is not coming to php page):
<?php
$game=$_POST['game'];
?>
Make the value of the game: parameter an array of all the games you want.
"data": { games: ["Football", "Baseball"] },
Then in abcd.php, you can do:
$games = $_POST['games'];
This will be an array, and you can loop over it to process all the games that are requested.
I have an web-application that uses JQuery DataTables. It uses the ajax parameter for requesting and inserting JSON data into the table.
However, at the top of the requested .php file it is checked whether the user is logged in. If this check fails it echoes a JSON notice.
<?php
session_start();
if (!isset($_SESSION['logged']) || $_SESSION['logged'] !== true) {
$array = array(utf8_encode('logged')=>utf8_encode('false'));
echo json_encode($array);
exit;
}
?>
table = $('#active-issues').DataTable({
"scrollY": pixels,
"dom": '<"top"if>rt<"bottom"><"clear">',
"paging": false,
"responsive":true,
"bProcessing": true,
"ajax": {
"data": function(){
$('#active-issues').DataTable().ajax.url(
"php/get_issues.php"
+ "?id=" + id
+ "&customer_id=" + customerid
);
}
},
columns: [
{ responsivePriority: 1 },
{ responsivePriority: 2 },
{ responsivePriority: 4 },
{ responsivePriority: 3 },
{ responsivePriority: 5 },
{ responsivePriority: 6 },
{ responsivePriority: 7 }
],
"columnDefs": [
{ "type": "alt-string", targets: 5},
{ "type": "alt-string", targets: 6},
]
});
table.ajax.reload(null, false);
Is it possible to catch the response given to JQuery DataTables? So that I can check whether result is { logged: "false" } and act accordingly?
Took a while and the help of 'allan' from datatables forums. But the problem is finally solved.
via dataSrc it's possible to manipulate the ajax result before it is printed in the table, I, however, used it to check whether the result contains logged and whether it equals to false and act accordingly if it does:
"ajax": {
"data": function(){
$('#active-issues').DataTable().ajax.url(
"php/get_issues.php?id=" + id + "&customer_id=" + customerid
);
},
"dataSrc": function ( json ) {
if(typeof json['logged'] != "undefined") {
if (json['logged'] == 'false') {
location.replace('php/logout.php');
}
}
return json.aaData;
}
},
Yes, this can be done if you do your ajax cal externally i.e perform an independent ajax request to obtain the response and the identify if the response contains
{ logged: "false" } and the populate the data to the data table accordingly.
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()