Situation
I am unable to disable sorting on some colums eventhough im using the 'right' code. I have seen several StackOverflow post and tried the answers. nothing seems to work and I keep getting the same error in my console.
SyntaxError: missing } after property list
"aoColumnDefs": [
//or
SyntaxError: missing } after property list
"columnDefs": [ {
Code
$('#tblMarkers').DataTable({
paging: false,
searching: false,
info: false
"columnDefs": [ {
"targets": 3,
"orderable": false
} ]
});
EDIT: I was missing a comma...
But another Question... how can I do multiple targets?
I use something like this for this purpose;
$('#tblMarkers').dataTable({
"aaSorting": [],
"aoColumns": [
null,null,{ "bSortable": false }
]
});
Null refers to default and { "bSortable": false } makes the column unsortable.
Note: This is a 3 column table with last column unsortable.
Your tried
$('#tblMarkers').DataTable({
paging: false,
searching: false,
info: false,
"columnDefs": [ {
"targets": 3,
"orderable": false
} ]
);
Multiple targets are simply an array of indexes. This works for me:
source doc
$('#data_table').DataTable({
"columnDefs": [
{ "orderable": false, "targets": [0, 4, 5, 6] },
{ "orderable": true, "targets": [1, 2, 3] }
]
});
Related
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'm using "bSortable": false and "orderable": false but still sort asc icon visible in first column header. I have tried "bsort":false and "orderable": false, "targets": "_all" but still the icon is visible.
If i use "aaSorting":[] this it throws
Undefined variable: orderColumn
Mycode:
var test_table = $('#testDataTable').DataTable({
// "lengthMenu": [[10, 50, 100,150,200], [10, 50, 100,150,200]],
"lengthMenu": [[25, 50, 100], [25, 50, 100]],
"iDisplayLength": 25,
"sScrollX" : "100%",
"scrollX" : true,
"processing" : true,
"serverSide" : true,
"destroy":true,
"ajax" : {
url: "/test/datatable.php",
type: 'POST',
data: { status: 'ok' }
},
'columnDefs' : [{"searchable": true, "orderable": false, "targets": '_all' }, {"width": "12%", 'targets': [3,4,5] }]
});
Thanks in advance.
Change your code to this:
For me this works all the time ;)
var test_table = $('#testDataTable').DataTable({
// "lengthMenu": [[10, 50, 100,150,200], [10, 50, 100,150,200]],
"lengthMenu": [[25, 50, 100], [25, 50, 100]],
"iDisplayLength": 25,
"sScrollX" : "100%",
"scrollX" : true,
"processing" : true,
"serverSide" : true,
"destroy":true,
"ajax" : {
url: "/test/datatable.php",
type: 'POST',
data: { status: 'ok' }
},
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ "_all" ] }],
"aaSorting": []
});
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 am using jQuery datatable in my php code.
my server server-side processing script here
$columns = array(
array( 'db' => 'val1', 'dt' => 0 ),
array( 'db' => 'val2', 'dt' => 1 ),
);
here problem is that how i get another unbound column val3
which have value of val1+val2 .
Example :
val1 val2 val3
1 2 3
3 5 8
here val1 and val2 is database column and val3 is calculated column.
I am stuck right now that how to add val3 column from server-side script.
Any help is appreciated.
You need to write DB query from server side for getting 3rd column.
Client side keep 3 columns table code (html)
<table class="table results" border="1">
<thead>
<tr>
<th>val1</th>
<th>val2</th>
<th>val3</th>
</tr>
</thead>
</table>
Client side define 3 columns (jquery datatable)
results= $(".results").dataTable({
aLengthMenu: [ [10, 25, 50, 100, 150, "-1"], [10, 25, 50, 100, 150, "All"] ],
iDisplayLength: 10,
searching: true,
"aaSorting": [],
"order": [[ 0, "desc" ]],
"sPaginationType": "full_numbers",
"bProcessing": true,
"serverSide": true,
"bDestroy": true,
"cache": false,
"sAjaxSource": "<?php echo $serverside_php; ?>",
"sDom": 'T<>lfrtip',
"oTableTools": {
"sRowSelect": "os",
"aButtons": [ "select_all", "select_none" ]
},
"aoColumnDefs": [
{ "bSortable": false },
{ "data": "val1" },
{ "data": "val2" },
{ "data": "val3" },
],
});
Feed the server side response data to client datatable + html
is there anyway to search the columns only second col without using filter?
i've tried using:
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 1 ] }]
"searchCols":[null, {"search":""}, null]
here is my complete script:
$(document).ready(function(){
oTable = $("#roles").dataTable({
"processing":"true",
"serverSide": "true",
"ajax": "roles",
"columns":[
{data: 'id', name:'id'},
{data: 'name', name:'name'},
{data: 'link', name:'link'}
{data: 'actions', name:'actions'}
],
"oClasses": {
"sFilter": "pull-right",
"sFilterInput": "form-control input-rounded ml-sm"
},
"Dom": "<'row'<'col-md-6 hidden-xs'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_",
"sInfo": "Showing <strong>_START_ to _END_</strong> of _TOTAL_ entries"
},
"searchCols":[null, {"search":""}, null]
});
});
is there anyway so i can only filter name column without using footer filter?
because if i not specific a column to be filter, when i tried to search it will get an error because there is actions column.