I would disable order possibility to user after datatables is draw.
I have a datatable, and I would order a data and remove possibility, for an user, to order data manually.
How can I do it?
I used below code:
table = $('#tbl-1').DataTable({
"info": false,
"searching": true,
"paging": false,
"iDisplayLength": 25,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tutti"]],
"language": {"url": "include/it_IT.txt"},
"order": [[1,"desc"]],
//"ordering": false,
//"orderFixed": {"pre": [ 1, "desc" ]},
"fnInitComplete": function(oSettings, json) {
//alert( 'DataTables has finished its initialisation.' );
this.fnFilter("<?php echo $_POST['search'];?>");
},
}).on('init.dt', function (e, settings, data) {
wrappa(); //after custom function
});
old post but still not handled by dt api. Removing the events won't work if wanting to temporarily disable sorting. Instead use jquery to add and later remove a class onto each th, and in this class specify "pointer-events: none".
Due to the fact that the API does not have a way to do this, I would suggest the following approach
Declare your table at first
var table = $('#myTable').DataTable();
Re-Initialize your dataTable with to disable ordering
//Destroy your table before
table.destroy();
$('#myTable').dataTable( {
"ordering": false
} );
reference:
https://datatables.net/reference/option/ordering
Related
I am creating a DataTable in Javascript, which has the following properties:
var dtable = $('.ssdatatable').DataTable({
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
"bProcessing": true,
"sDom": "TBflrtip",
"bServerSide": true,
"sAjaxSource": ajSource,
"iDisplayLength": 25,
"bJqueryUI": false,
"bAutoWidth": false,
//"bAutoLength": false,
//"bLengthChange": false,
"recordsFiltered": 0,
"sPaginationType": "full_numbers",
"bPaginate": true,
"sServerMethod": "POST",
"responsive": true,
"fixedHeader": true,
"buttons": [
'copy', 'excel', 'pdf'
],
"aoColumns": [
//columns
]
});
One of the particular columns is a Description, which has a LOT of text in it. The width of columns is fixed, however because of that, the height of my rows are blowing out of proportions, making page x10 of its intended size.
My question is: is there anything I can add inside the properties to make it show only N characters, and by hitting limit it would be something like:
|text textte...|
| Show More|
(I tried commented out options, did do me any good)
Or would I need to use some method or modify css?
Had the same problem - only I wanted to show all the text when the table is exported and thus only limit the text, when displayed. So based on this blog https://datatables.net/blog/2016-02-26, I further developed the code in order to allow the whole text to be shown when the table is exported.
In order to do so, I altered the code so text > 50 char is not removed, but instead wrapped in a span which is then hidden from CSS.
The function code looks like this:
function(data, type, row) {
if (type === 'display' && data != null) {
data = data.replace(/<(?:.|\\n)*?>/gm, '');
if(data.length > 50) {
return '<span class=\"show-ellipsis\">' + data.substr(0, 50) + '</span><span class=\"no-show\">' + data.substr(50) + '</span>';
} else {
return data;
}
} else {
return data;
}
}
Then from the CSS file you can add:
span.no-show{
display: none;
}
span.show-ellipsis:after{
content: "...";
}
given data:
var mydt = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 5, b: 6, c: 7, d: 8 }, { a: 10, b: 12, c: 13, d: 14 }];
$("#tbl2").DataTable({
columnDefs: [{ targets:[0] }],
data: mydt, columns: [{ data: "a" }, { data: "b" }, { data: "c" }, { data: "d" }],
createdRow: function (row, data, c, d) {
// so for each row, I am pulling out the 2nd td
// and adding a title attribute from the
// data object associated with the row.
$(row).children(":nth-child(2)").attr("title", data.b)
},
and the rest
here is a working one in jfiddle https://jsfiddle.net/bindrid/wbpn7z57/7/ note that this one has data in a different format but it works (on the first name column)
// DataTable created the createRow hook to allow the row html to be updated after it was created.
-- row is the current row being created
-- data is the data object associated with the row.
createdRow: function (row, data, c, d) {
$(row) gets the tr in a jQuery object
$(row).children() gets all of the td's in the row
(":nth-child(2)") gets the 2nd td in the row. Note, this is 1 based value,not 0 based.
.attr is the jquery command that adds the "title" attribute to the td.
the "title" is missed name but too late now.
data.b matches the data structured used to populate the table.
The actual structure of this data structure is dependent on your data source so you would actually have to check it.
Hope this helps :)
In the below example code block:
Whereas "Targets": 2 indicates column index, "data":"description" points out column name that wanted to be manipulated. When we look at the render function, description column is limited to 100 characters length.
var dtable = $('.ssdatatable').DataTable({
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
"bProcessing": true,
"sDom": "TBflrtip",
"bServerSide": true,
"sAjaxSource": ajSource,
"iDisplayLength": 25,
"bJqueryUI": false,
.....
{
"targets": 2,
"data":"description",
render: function(data, type, row, meta) {
if (type === 'display') {
data = typeof data === 'string' && data.length > 100 ? data.substring(0, 100) + '...' : data;
}
return data;
}
},
});
I am using individual column filtering in data table along with stateSave: true. To perform column filtering I am using column filter.js.
I am facing one issue If I filtered data in the column and reload the page it maintains state for table only but textbox becomes empty.
On page refresh, the state remains same for the table and for searching textbox too.
On page refresh, the textbox value should be shown, but instead of that, text box becomes empty.
Please, someone, let me know how can I maintain textbox value along with table state.
I am using this code
jQuery('#Gridtable').dataTable({
stateSave: true,
"aLengthMenu": [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]],
"iDisplayLength": 10,
}).columnFilter({
sPlaceHolder: "head:after",
aoColumns: [
{ type: "text" },
{ type: "text" },
{ type: "text" },
]
});
"stateLoaded": function stateLoadedCallback(settings, state) {
state.columns.forEach(function (column, index) {
$('#' + settings.sTableId + '-head-filter-' + index).val(column.search.search);
});
}
Just put values from your state into the fields
If you use stateSave=true DataTables option you can load it this way (in footer in my case):
stateSave: true,
stateLoadParams: function(settings, data) {
for (i = 0; i < data.columns["length"]; i++) {
let col_search_val = data.columns[i].search.search;
if (col_search_val !== "") {
$("input", $("#your-id-of-table tfoot th")[i]).val(col_search_val);
}
}
}
Cheers!
Just in case someone stumbles across this post after two years... this should be the solution to the described issue.
my datatable containes a column Rank.
it includes rank of students starting from 1 and if a student is absent rank is defined as 'Absent'.
The problem is when sorting this column it comes like 1,10,11,12,...,2,20,21,..,Absent,Absent,..
my data table initialisation is
$(document).ready( function () {
var oTable = $('#filtertableobj').dataTable({
"iDisplayLength": 500,"aLengthMenu": [[100, 200, 500, 1000], [100, 200, 500, 1000]],
/*BEGIN Fixing the index row so they are not sorted -r2ros */
"fnDrawCallback": function ( oSettings ) {
var that = this;
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
this.$('td:first-child', {"filter":"applied"}).each( function (i)
{
that.fnUpdate( i+1, this.parentNode, 0, false, false );
} );
}
},
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] } ],
});
});
How to sort like 1,2,3,...,10,11,12,..,Absent,Absent,...
What you're looking for is called a "natural sort". If you search that in SO you'll find your answer. Try this
Sort Array Elements (string with numbers), natural sort
I would like to create a function that can be called multiple times within an HTML page so I can display multiple stacked bar graphs. They can't all be in the same chart because I need a bunch of other content between them.
My first thought was to just write the function and pass data to it as I need to create the bars. I tried the below but for some reason is gives me an error of No plot target specified.
I am also not sure if this would be the best or most efficient way to accomplish this.
Thanks to anyone taking a look at this!
I thought each time I needed a bar I would just insert the below in the HTML
<script>
var id ='bar_one'; //I also tried document.getElementById('bar_one');
var data1 = [[12, 1]];
var data2 = [[5, 1]];
var data3 = [[3, 1]];
barBuilder(id, data1, data2, data3);
</script>
<div id='bar_one' style="height:75px;width:500px; "></div>
External JavaScript file
function barBuilder(id, data1, data2, data3){
var options = {
animate: true,
animateReplot: true,
stackSeries: true,
seriesColors:['#007f00', '#00b200', '#00ff00'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {show: true,location: 'w'},
rendererOptions: {
barMargin: 13,
barDirection: 'horizontal'},
},
axesDefaults:{
tickOptions: {textColor: 'black'}
},
axes:{
yaxis:{renderer: $.jqplot.CategoryAxisRenderer,
showTicks: false,
tickOptions: {showGridline:false, showMark:false}
},
xaxis:{showTicks:false,
show: false,
tickOptions:{showGridline: false},
rendererOptions:{drawBaseline:false}
}
},
grid:{
background:'transparent',
drawBorder: false,
shadow: false}
};
$.jqplot(id, [data1,data2,data2],options);
}
You are trying to plot graph in a div with id 'bar_one' but each time you call it to plot different graphs in the same div, so a better option would be to use for loop for dynamically creating div and passing graph values to jqplot object and appending for loop variable to the id's (inorder to create unique id for each div) created with different data.
I am wondering if there is a simple way to allow a JQuery datatable to re-size itself while the user is using a browsers zoom-in, zoom-out features. Currently When I zoom in and out on my data table the data either shrinks or grows too large for the table. And I also noticed that after I zoom out or in I can refresh the page and the datatable resizes itself to how it should look. Any insight or possible redirection to a question where this has been answered (could not find one) would be appreciated. Thanks.
Here are my JavaScript table properties:
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
You can tie a datables redraw event to a window re-size function:
$(window).resize(function() {
oTable.fnDraw(false)
});
This assumes you initialized your table with the variable oTable like this:
var oTable = $("#tableName").dataTable({
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
});
You could also set the table in question to have style="width:100%;" and then use the "bAutoWidth":false option for DataTables. It then maintains your width and you don't actually need a redraw. Especially for tables doing complex Server side processing tables, this is quite a bit lighter. For the HTML just change the style
<table id="tableName" style="width:100%;">...</table>
And then your DataTables add the option:
var oTable = $("#tableName").dataTable({
// Your other options here...
"bAutoWidth":false
});
You need to re-draw table when window resizes:
$(document).ready(function() {
//Load datatable here
$(window).bind('resize', function () {
table.draw();
});
});