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.
Related
I have a DataTable where i return my model. Inside this datatable i would like to get a column that shows a sub relationship and i can filter on that.
Example: Funds Have Member and Member has Cards
I add a column that i made myselh:
FundDataTable.php
->addColumn('cards.date', function(Fund $funds) {
if(count($funds->member->cards()->get())){
return $funds->member->cards()->first()->date;
}else{
return "None";
}
})
public function query(Fund $model)
{
return $model->newQuery()->with('member')->with('fr_status')->with('fr_payment_term')->with('member.cards');
}
protected function getColumns()
{
return [
Column::make('id'),
Column::make('member_id'),
Column::make('lastname'),
Column::make('begin_date'),
Column::make('fr_payment_term.payment_term'),
Column::make('destination'),
Column::make('cards.date'),
Column::make('fr_status.status'),
Column::computed('action')
->exportable(false)
->printable(false)
->addClass('text-center'),
];
}
index.blade.php
columns":[
{
"data": "id",
"name": "id",
"title": "Id",
"orderable": true,
"searchable": true
}, {
"data": "member_id",
"name": "member_id",
"title": "Member Id",
"orderable": true,
"searchable": true
}, {
"data": "lastname",
"name": "member.lastname",
"title": "Last name",
"orderable": true,
"searchable": true
}, {
"data": "begin_date",
"name": "begin_date",
"title": "Begin Date",
"orderable": true,
"searchable": true
}, {
"data": "fr_payment_term.payment_term",
"name": "payment_term",
"title": "Payment Term",
"orderable": true,
"searchable": true
}, {
"data": "destination",
"name": "member.destination",
"title": "Destination",
"orderable": true,
"searchable": true
},{
"data": "cards.date",
"name": "date",
"title": "Cards",
"orderable": true,
"searchable": true
}, {
"data": "fr_status.status",
"name": "status",
"title": "Status",
"orderable": true,
"searchable": true
}, {
"data": "action",
"name": "action",
"title": "Action",
"orderable": false,
"searchable": false,
"className": "text-center"
}
FundController.php
public function index(FundDataTable $dataTable)
{
session(['title' => 'Overview Funds']);
$statusses = ModelOption::where(['model' => 'Fund', 'name' => 'status'])->get();
$paymentTerms = ModelOption::where('model', 'PaymentTerm')->where( 'name','<>', 'status')->get();
$packages = Package::all();
return $dataTable->render('funds.index',[ 'statusses' => $statusses, 'packages' => $packages, 'paymentTerms' => $paymentTerms]);
}
Problem is when I filter on the searchbox for None. it does not work and shows everything.
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>
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'
]
});
"tgl_dok":{"date":"2018-07-02 00:00:00.000000","timezone_type":3,"timezone":"Europe\/Berlin"}
jQuery code
$(document).ready(function(){
$('#table').DataTable({
"paging": true,
"lengthChange": true,
"searching": false,
"ordering": true,
"info": false,
"responsive": true,
"autoWidth": false,
"pageLength": 10,
"ajax": {
"url": "../adapter/ArReport/rptPenerimaanHarian/data.php",
type: "POST",
data: ({kd_entitas: kd_entitas,
tglAwal: tglAwal,
tglAkhir: tglAkhir})
},
"columns": [
{
title: 'Date',
data: "tgl_dok",
"type": "date",
},
{
title: 'Receipt. No',
data: "no_dok"
},
]
})
});
How can I show date format like DD/MM/YY in datatables?
UPDATE MyTable SET MyDate = CONVERT(datetime, '2018-07-02 00:00:00.000000', 121)
about convert rules look here
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();
}