Here is the code i am using
$(document).ready( function() {
$('.d-table').dataTable( {
"responsive": true,
"columnDefs": [ { "targets": 0,"searchable": false, 'bSortable': false } ]
});
})
This code is disabled first column sorting but I want to disable Sorting completely while i sort other columns.
For disabling the particular column sorting you can specify column index for disabling as below
For first column :
"columnDefs": [ {
"targets": 0,
"orderable": false
} ]
If you want to disable the sorting completely in DataTable. There is property called "bSort" you can set it to "false" it will remove the sorting from whole table.
like below
$('.d-table').dataTable( {
"bSort": false
});
Demo : https://jsfiddle.net/Prakash_Thete/k1pm5ne0/
Related
I have a DataTable and I would like to display data over several pages. I would like pages with 100 elements on each. In addition I would like to have some of my columns sortable.
In my Database I have more than 100 elements and my DataTable is only showing the first 100...
I've noticed some things :
1) When I put "bServerSide": false my columns are sortable BUT my number of rows is limited to 100 (one page with 100 elements).
2) When I put "bServerSide": true my number of rows is now correct (several pages with 100 elements on each) BUT my columns are not sortable anymore (I mean the sort function doesn't work when I click on the sort button).
$('#tableSupervisionElecteur').DataTable({
"bLengthChange" : false,
"bFilter" : false,
"bProcessing": false,
"searching": false,
"ordering": true,
"order": [[1, 'asc']],
"bStateSave": false,
"pageLength": 100,
"iDisplayStart": 0,
"bServerSide": true,
"initComplete": function(settings, json) {
},
"fnDrawCallback": function () {
},
"sAjaxSource": "sourcesDataTables",
"aoColumns": [
...
],
columnDefs: [
{
orderable: false,
targets: 0
},
{
orderable: false,
targets: 7
},
{
orderable: false,
targets: 8
},
]
});
I would like to have BOTH features working together (sorting and displaying) and not one or the other.
Furthermore my DataTable needs to be able to handle approximately 30 000 rows.
Remove orderable: false for the columns which you need ordering and also specify the order(asc or desc) in "order" option
Its depending on your server side, as order is processed on server. Server must check if any request for asc or desc and build your database query, each column field sorted base on that.
I am using a Jquery datatable. The data for teh table is dynamically shown. I want to freeze the first 2 columns in the datatable. But the table is getting distorted when I add the code to freeze columns.
$('#example1').dataTable({
data:data.data,
columns:data.columns,
paging: false,
scrollX: true,
scrollY:false,
scrollCollapse: true,
fixedColumns: {
leftColumns: 2
},
"columnDefs": [ {
"targets": colStyleArray,
"createdCell": function (td, cellData, rowData, row, col) {
// console.log("td"+td+"cellData"+cellData+"rowData"+rowData+"row"+row+"col"+col);
if ( colStyleArray.indexOf(col)!=-1 ) {
$(td).addClass("bg-info")
}
}
} ]
});
Actual Result (After Using Fixed Columns):
Result comes like this If I don't use the Fixed columns code :
I use jquery datatables with serverside processing. It works fine til press pagination battons. When user press pagination button fnServerData call with oSettings argument with no sType parametr!
for example call fnServerData after Next button:
The same call after some filter button:
Is it a datatables bug or what? how can i fix it?
UPD: my datatables initialization
var table = $("#table_id").DataTable(
{
"order": [[0, "desc"]],
"sAjaxSource": "/odata/Messages",
"iODataVersion": 4,
"aoColumns": [
{ mData: "Id", sType: "numeric" },
...
],
"fnServerData": fnServerOData,
"bServerSide": true,
"bUseODataViaJSONP": false,
"processing": true,
"lengthMenu": [[10, 100, 1000], [10, 100, 1000]]
});
As said by #Rory McCrossan over Here,
With the latest version of DataTables, you need to set the type property of the object you provide in the columnDefs array, like this:
$('#example').dataTable({
"columnDefs": [
{ "type": "num" }
]
});
Note that there are many other methods of sorting which can be found in the documentation
For more info : stype-numeric-doesnt-seem-to-work-anymore (Datatable official)
I'm using JQuery Datatable and I ran into a problem when I used fixed column.
It has been showing two times my fixed column
I'm using serverside processing and that's my code:
dataTable = table.dataTable({
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
scrollX:true,
scrollCollapse: true,
"fnDrawCallback":function(oSettings) {
$('div.choosePage select').val(dataTable.DataTable().page());
},
"pagingType":"bootstrap_full_number",
"processing": true,
"serverSide": true,
"ajax": {
"data":GETDATA,
"dataSrc":SETAJAXDATA
},
"fnInitComplete":completeProcess,
"colReorder": true,
"order": [
[0, 'asc']
],
"dom": "<'row' <'col-md-12'>><'row'<'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-4 col-sm-12'i><'col-md-5 col-sm-12 toolbar'p><'col-md-push-1 col-md-3 col-sm-12 toolbar choosePage'>>", // horizobtal scrollable datatable
})
Ajax is working good and there is no problem when I used fixed column on left side,but when I used it on right side i'm running into this problem.
Thanks.
I believe it is a bug in Jquery Datatable if you haven't setup scrollY from the options, make sure you set some value.
Because when you inspect the element you can see scroll-y overflow is auto. If you set it as hidden or not setup a value from the options, there you go, you see the space at the right side.
Incase you do not want to use scroll-y at all, then you need to make your hands dirty with some css code by giving some minor margin which is an ugly solution. But I cannot see any other option for you.
It's a shame for Jquery datatable plugin.
Below shows an example option list from the plugin website.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
} );
} );
I have done a datatable and custom it's data but when i click the button on the first column, it only works on the first page and cannot click on other forward pages.
$('#tbl').DataTable( {
responsive: true,
data: data1,
autoWidth: false,
"order": [[ 7, "asc" ]],
"iDisplayLength": 5,
"pagingType": "full_numbers",
"dom": '<"top">rt<"bottom"p><"clear">',
"oLanguage": {
"sEmptyTable": "Not Record"
},
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
} );
BUT when for the click function in live mode, it still cannot work
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () {
.......
} );
id's must be unique. We dont know your markup but
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function ()
seems utterly wrong. Either you have multiple <a>'s with the same id #edit_current_product or the right thing actually happens, you have paginated away from the page where #edit_current_product is present.
I guess that what you really want is
$('#tbl').on('click', 'tbody tr a', function()
or use a class instead of an id
$('#tbl').on('click', 'tbody tr .edit_current_product', function()
BTW, why
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
you just need
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] },
{ "sClass": "dt-body-justify", targets : [1] }
]