Related
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
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'
]
});
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.
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();
}
I need to load a datatable from an AJAX source. My PHP script returns a JSON output in this form:
{
"SiteID": "61",
"SiteRef": "MI Swaco, Pocra Quay (Elect 910)",
"SupplierID": "1",
"StartDate": "2013-06-01 00:00:00.000",
"EndDate": "2014-05-31 00:00:00.000",
"Voltage": "LV"
},
{
"SiteID": "8",
"SiteRef": "UK Training Centre, (Elect 318)",
"SupplierID": "1",
"StartDate": "2013-07-01 00:00:00.000",
"EndDate": "2014-06-30 00:00:00.000",
"Voltage": "LV"
},
{
"SiteID": "115",
"SiteRef": "Smith Int, Bruce Fac (Gas 102)",
"SupplierID": "31",
"StartDate": "2013-08-01 00:00:00.000",
"EndDate": "2014-07-30 00:00:00.000",
"Voltage": "LV"
}
I have validated it via JSONLint and it says it is a valid JSON output. However when I use it for datatable it says invalid json output. This is how I am interfacing it with dataTable:
$(function() {
//$('#termTable').dataTable().makeEditable();
$('#termTable').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "terminateContractList.php"
},
"columns": [
{"data": "SiteID"},
{"data": "SiteRef"},
{"data": "SupplierID"},
{"data": "StartDate"},
{"data": "EndDate"},
{"data": "Volatage"}
]
});
});
Please correct the spelling of Voltage in your code.
$( function(){
//$('#termTable').dataTable().makeEditable();
$('#termTable').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "terminateContractList.php"
},
"columns": [
{ "data": "SiteID" },
{ "data": "SiteRef" },
{ "data": "SupplierID" },
{ "data": "StartDate" },
{ "data": "EndDate" },
{ "data": "Voltage" }
]
} );
});
"Voltage" in the JSON data won't match the "Volatage" column in your dataTable