Unable to display the last column in DataTable - php

Unable to display the last column in DataTable
THE code works fine, but I'm not sure whats wrong in my code. The last column "DELETE" doesn't show. The code given below. Any help will be highly appreciated..
I'm using DataTable to display my records. The '$title' is the name of the page which is passed inside AJAX to get the required table.
HTML
<div class="container justify-content-center">
<div class="table-responsive-md justify-content-center">
<table id="dataTable" class="table table-striped shadow" style="width:100%">
<thead class="bg-secondary text-white">
<tr>
<th>ID</th>
<th>University</th>
<th>Code</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
JQUERY
$(document).ready(function () {
$title = $(".page-title").text().toLowerCase();
$('#dataTable').DataTable({
responsive: true,
"autoWidth": true,
"searching": true,
"paging": true,
"info": false,
"pagingType": "full_numbers",
"pageLength": 5,
"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"bLengthChange": false,
"stateSave": true,
"bStateSave": true,
fixedHeader: {
header: true,
footer: false
},
"processing": true,
"serverSide": false,
"ajax": {
"url": "scripts/post.php",
"type": "POST",
"dataType": "json",
"dataSrc": "data",
"data": {
table: "tbl_" + $title
}
},
"rowId": "pk_int_" + $title + "ID",
"columns": [
{"data": "pk_int_" + $title + "ID"},
{"data": "txt_" + $title + "Name"},
{"data": "txt_" + $title + "Code"},
{
"data": null,
"visible": true,
"defaultContent": '<i class="far fa-edit"></i>',
"targets": -1
},
{
"data": null,
"visible": true,
"defaultContent": '<i class="far fa-trash-alt text-danger"></i>',
"targets": -1
}
],
columnDefs: [
{"title": "University Name", "targets": 1},
// {targets: [0, 1, 2, 3, 4], visible: true},
{targets: '_all', visible: true},
{
"targets": 0,
"title": "ID",
"className": "text-left",
"width": "5%"
},
{
"targets": 1,
"className": "text-left",
"width": "50%"
},
{
"targets": 2,
"className": "text-left",
"width": "25%"
},
{
"targets": [3, 4],
"className": "text-center",
"width": "10%",
"visible": true,
"bSortable": false
}
],
language: {
paginate: {
next: '<i class="fas fa-angle-right"></i>',
previous: '<i class="fas fa-angle-left"></i>',
first: '<i class="fas fa-angle-double-left"></i>',
last: '<i class="fas fa-angle-double-right"></i>'
}
}
});
});
JSON
{
"recordsTotal": 5,
"data": [{
"pk_int_universityID": "1",
"txt_universityName": "Not Available",
"txt_universityCode": "NA"
}, {
"pk_int_universityID": "2",
"txt_universityName": "Others",
"txt_universityCode": "Others"
}, {
"pk_int_universityID": "3",
"txt_universityName": "Sultan Qaboos University",
"txt_universityCode": "SQU"
}, {
"pk_int_universityID": "4",
"txt_universityName": "Oman Medical College",
"txt_universityCode": "OMC"
}, {
"pk_int_universityID": "5",
"txt_universityName": "Arabian Gulf University",
"txt_universityCode": "AGU"
}]
}
OUTPUT

Related

In datatable, sProcessing text is not loading

After passing json_encode variable, not able to loading "sProcessing" text before loading data. I am trying to load more than 50000 records.
Javascript Code
<script>
var data = <?php echo json_encode($data); ?>;
$(document).ready(function() {
$('#datatable').dataTable({
"aaData": data,
"bProcessing": true,
"aoColumns": [
{ "data": "submissions_dt" },
{ "data": "pettycash_dt" },
{ "data": "type" },
{ "data": "description" },
{ "data": "voucher_no" },
{ "data": "amount", className: "right" }
],
"oLanguage": {
"sProcessing": "Fetching Data, Please wait..."
},
order: [[2, 'desc']],
"lengthMenu": [[50, 100, -1], [50, 100, "All"]],
"columnDefs": [
{ "orderable": false, "targets": [0,1,2,3,4,5] },
{"targets": [ 2 ], "visible": false }
]
});
});
</script>

Server-side processing default order

I want to set the default ordering of my datatable into desc.
I tried to see the value of $request["order"][0]['dir'] it always comes up in ascending order. Is there a way to set the ordering to descending order? I have added my JS below.
$sqlRecord .= " ORDER BY ". $columns[$request['order'][0]['column']] ." " . $request["order"][0]['dir'] . " LIMIT " . $request["start"] . " ," . $request["length"]. " ";
$.ajax({
url: "coordinator-activities-table.php",
method: "POST",
success: function(data){
$("#retailer-activities-container").html(data);
table = [
{ "width": "120px", "orderable": false, "targets": 0 },
{ "width": "80px", "targets": 1 },
{ "width": "150px", "targets": 2 },
{ "width": "120px", "targets": 3 },
{ "width": "150px", "targets": 4 },
{ "width": "150px", "targets": 5 },
{ "width": "150px", "targets": 6 },
{ "width": "150px", "targets": 7 },
{ "width": "150px", "targets": 8 },
{ "width": "150px", "targets": 9 },
{ "width": "120px", "targets": 10 },
{ "width": "100px", "targets": 11 },
{ "width": "110px", "targets": 12 },
{ "width": "110px", "targets": 13 },
{ "width": "150px", "targets": 14 },
{ "width": "150px", "targets": 15 },
{ "width": "120px", "targets": 16 },
{ "width": "150px", "orderable": false, "targets": 17 }
];
var table = $('#activities-table').DataTable({
"searching": { "regex": true },
"paging": true,
"autoWidth": false,
"processing": true,
"serverSide": true,
"ajax": {
url: "coordinator-activities-data.php",
type: "POST",
"dataType": "json",
data: {coordinator:coordinator, startdate:startdate, enddate:enddate, regional:regional},
"complete": function(response) {
}
},
"columnDefs": table,
"language": {
"emptyTable": "No data available in table",
"zeroRecords": "No data available in table",
"info": "Showing <b>_START_</b> to <b>_END_ of _TOTAL_</b> entries",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
search: "_INPUT_",
searchPlaceholder: "Search..."
},
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf'
]
});
},
error: function(data){
console.log("error");
}
});
I want to set the default ordering to descending
You can change the Sort data when datatable makes the request to server like this :
var firstsort='DESC';
var table = $('#activities-table').DataTable({
"searching": { "regex": true },
"paging": true,
"autoWidth": false,
"processing": true,
"serverSide": true,
"ajax": {
url: "coordinator-activities-data.php",
type: "POST",
"dataType": "json",
data: function (data) {
var sort = data.order[0].column;
//check condition or remove condition if you want every request with sort DESC
if (firstsort != '') {
data.order[0].dir = "DESC";
firstsort = '';
}
data['coordinator'] = coordinator, data['regional'] = regional,
data['startdate'] = startdate, data['enddate'] = enddate;
return data;
},
"complete": function (response) {
}
},
"columnDefs": table,
"language": {
"emptyTable": "No data available in table",
"zeroRecords": "No data available in table",
"info": "Showing <b>_START_</b> to <b>_END_ of _TOTAL_</b> entries",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
search: "_INPUT_",
searchPlaceholder: "Search..."
},
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf'
]
});

How to do server side sorting in data tables

I have used data tables in one of my project, all things are working fine except ordering, we want to use server side sorting, I tried lots of examples but it is not working for me,can anyone please help me to do sorting, I am stuck in this issue, here is my code
episodes_data_table = $('#episodes_table').DataTable({
"processing": true,
"serverSide": true,
"pageLength": 20,
"dom": 'trip<"clear">',
//"dom": 'trilp<"clear">',
"aaSorting": [[0, "desc"]],
"ajax": {
type: "post",
url: "<?php echo base_url(); ?>billing/get_episodes_data",
data: function (d) {
return jQuery.extend({}, d, {
"branch_id": current_branch_id,
"month": $(".month-filter-input").val(),
"year": $(".year-filter-input").val(),
});
}
},
"fnDrawCallback": function (oSettings) {
},
"columnDefs": [
{
"data": "ID",
"render": function (data, type, row) {
return data;
},
"targets": 0,
"visible": false,
"bSortable": false,
},
{
"data": "LastName",
"render": function (data, type, row) {
return data;
},
"targets": 1,
"visible": true,
"bSortable": false,
},
{
"data": "MRN",
"render": function (data, type, row) {
return data;
},
"targets": 2,
"visible": true,
"bSortable": false,
},
{
"data": "SOC",
"render": function (data, type, row) {
return data;
},
"targets": 3,
"visible": true,
"bSortable": false,
},
{
"data": "EpStart",
"render": function (data, type, row) {
return data;
},
"targets": 4,
"visible": true,
"bSortable": false,
},
{
"data": "EpEnd",
"render": function (data, type, row) {
return data;
},
"targets": 5,
"visible": true,
"bSortable": false,
},
{
"data": "PhyFirstName",
"render": function (data, type, row) {
return data;
},
"targets": 6,
"visible": true,
"bSortable": false,
},
{
"data": "SNVisits",
"render": function (data, type, row) {
return data;
},
"targets": 7,
"visible": true,
"bSortable": false,
},
{
"data": "HHAVisits",
"render": function (data, type, row) {
return data;
},
"targets": 8,
"visible": true,
"bSortable": false,
},
{
"data": "MSWVisits",
"render": function (data, type, row) {
return data;
},
"targets": 9,
"visible": true,
"bSortable": false,
},
{
"data": "PTVisits",
"render": function (data, type, row) {
return data;
},
"targets": 10,
"visible": true,
"bSortable": false,
},
{
"data": "OTVisits",
"render": function (data, type, row) {
return data;
},
"targets": 11,
"visible": true,
"bSortable": false,
},
{
"data": "STVisits",
"render": function (data, type, row) {
return data;
},
"targets": 12,
"visible": true,
"bSortable": false,
},
{
"data": "TotVisits",
"render": function (data, type, row) {
return data;
},
"targets": 13,
"visible": true,
"bSortable": false,
},
]
});
Can anyone please look at the code and give me the proper solution ? Any help will be really appreciated.

Amchart dataLoader to have drilldown dynamically

Based on this tutorial https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/, I am able to load the data by calling a php page using dataLoader into this kind of chart https://www.amcharts.com/demos/combined-bullet-column-line-chart/
My requirement:
When click on the column in the chart, it needs to call the another php file to fetch data with a different query based on the selection in the chart (that will be used as a where condition in query).
I tried something with the below code, but nothing works
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "MM-YYYY",
"precision": 2,
"valueAxes": [{
"id": "v1",
"title": "Average",
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return Math.round(value) ;
}
}, {
"id": "v2",
"title": "Maximum",
"gridAlpha": 0,
"position": "right",
"autoGridCount": false
}],
"graphs": [{
"id": "g3",
"valueAxis": "v1",
"lineColor": "#e1ede9",
"fillColors": "#e1ede9",
"fillAlphas": 1,
"type": "column",
"title": "Actual Average",
"valueField": "Average",
"clustered": false,
"columnWidth": 12,
"legendValueText": "[[value]]",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g4",
"valueAxis": "v1",
"lineColor": "#62cf73",
"fillColors": "#62cf73",
"fillAlphas": 1,
"type": "column",
"title": "Actual Maximum",
"valueField":"Maximum",
"clustered": false,
"columnWidth":8,
"legendValueText": "[[value]]",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g1",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#20acd4",
"type": "smoothedLine",
"title": "Target Average",
"useLineColorForBulletBorder": true,
"valueField": "Average",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g2",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#e1ede9",
"type": "smoothedLine",
"dashLength": 5,
"title": "Target Maximum",
"useLineColorForBulletBorder": true,
"valueField": "Maximum",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "Month",
"categoryAxis": {
"parseDates": true,
"dashLength":1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": true
},
//"dataProvider":[{"Month":"01-2016","Average":43.63888889,"Maximum":50.06222222,"Province":"Riyadh"},{"Month":"02-2016","Average":46.11888889,"Maximum":52.78222222,"Province":"Eastern Province"},{"Month":"03-2016","Average":48.33740741,"Maximum":49.78555556,"Province":"Eastern Province"},{"Month":"04-2016","Average":39.37629630,"Maximum":41.25111111,"Province":"Eastern Province"},{"Month":"05-2016","Average":43.98481481,"Maximum":54.25000000,"Province":"Eastern Province"},{"Month":"06-2016","Average":49.68888889,"Maximum":71.53777778,"Province":"Riyadh"},{"Month":"07-2016","Average":39.92333333,"Maximum":44.52111111,"Province":"Eastern Province"},{"Month":"08-2016","Average":48.72370370,"Maximum":58.98222222,"Province":"Makkah"},{"Month":"09-2016","Average":34.18370370,"Maximum":43.88111111,"Province":"Makkah"},{"Month":"10-2016","Average":48.77962963,"Maximum":63.22333333,"Province":"Makkah"}]
"dataLoader": {"url": "bed-turnover.php"}
});
chart.addListener("clickGraphItem", function (event) {
// let's look if the clicked graph item had any subdata to drill-down into
// wow it has!
// let's set that as chart's
//chart.dataLoader.loadFile("bed-turnover-drill-province.php");
// event.chart.dataLoader ={"url": "bed-turnover-drill-province.php"};
// event.chart.validateData();
chart.dataLoader = { url: "bed-turnover-drill-province.php"}
//chart.validateData();
};
});
Kindly help.
Regards
You have to call the dataLoader's loadData method after you change the URL to load from the new source:
chart.addListener("clickGraphItem", function (event) {
chart.dataLoader.url = "bed-turnover-drill-province.php";
chart.dataLoader.loadData();
};

my web app looks different on server and works perfectly on localhost

i'm using datatables with codeigniter
and it looked like this on localhost
datatables on localhost
and looked like this on server, i can't get the columns on the right side
even if i enabled scrollX
datatables on server
my java-script code
$(document).ready(function () {
var oTable = $('#tb').dataTable({
"bProcessing": true,
"bServerSide": true,
"bStateSave": true,
"autoWidth": false,
"colReorder": true,
"responsive": true,
"scrollX": true,
"sAjaxSource": '<?php echo base_url(roleURIUser()); ?>/leads/viewdata',
"bJQueryUI": false,
"sDom": 'T<"clear">Rlfrtip',
"tableTools": {
"sSwfPath": "<?= locationPlugin('url'); ?>datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
},
"sPaginationType": "full_numbers",
"iDisplayStart ": 10,
"aoColumns": [{
"mData": "name"
}, {
"mData": "mobile"
}, {
"mData": "phone"
}, {
"mData": "branch"
}, {
"mData": "code"
}, {
"mData": "email"
}, {
"mData": "university"
}, {
"mData": "faculty"
}, {
"mData": "address"
}, {
"mData": "date_created"
}, {
"mData": "status"
}, {
"mData": "comment"
}, {
"mData": "date_followup"
}],
"aoColumnDefs": [
{"bSearchable": false, "aTargets": [5, 6, 7, 8, 9, 10, 11, 12]},
{"bSortable": false, "aTargets": [5, 6, 7, 8, 9, 11, 12]},
{"width": "30%", "aTargets": [11]}
],
"order": [[0, "desc"]],
"oLanguage": {
"sProcessing": "<img src='<?= locationUpload('url'); ?>/ajax-loader.gif'>"
},
"fnInitComplete": function () {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax
({
'dataType': 'json',
'type': 'GET',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}
});
Check the image path of button next to your name.(+) and (-) image path.
I can not understand well at all.
If the problem is that you can not get the data on the server, check your config data in application/config/database.php
$db['default']['hostname'] = "host";
$db['default']['username'] = "username";
$db['default']['password'] = "password";
$db['default']['database'] = "database_name";
$db['default']['dbdriver'] = "mysqli";
If your CONECCION is correct, then the problem is in your model or your controller, eg
controller.php
function do_somthing(){
$this->load->library('database');
$this->load->model('model_file');
$info = $this->model_file->get_data();
var_dump($info);
}
model_file.php
function get_data(){
return $this->db->get('table')->result();
}

Categories