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();
});
});
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.
I have built a Form Designing application on top of
dsmorse(dsmorse.github.io/gridster.js/)
grister and I can't add widget in more than 15 rows. I tried gridster.options.max_rows=60; but it didn't worked in my case.
set max_rows to the number the rows desired
example
gridster[{0}] = $('#grTer_{0} ul').gridster({
widget_base_dimensions: ['auto', 55],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 12,
max_rows: 140,
extra_rows : 40,
widget_margins: [30, 30]
}).data('gridster');
by default max_rows is 15 row max
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
I have a kendo grid with several 1000's of rows. I want to display them as 1000 per page. Can any one please tell me how can I make the dropdown customized with the values like 1000, 5000, 10000 etc. and display number of rows based on it in javascript or JQuery. For now am setting the page size to 1000 in javascript, but when I change it to 20 or 10 in dropdown, I am unable to get the 1000 back!
Any help appreciated!
If you are using Javascript for kendogrid, add the following during your grid definition:
pageable: {
pageSize: 1000,
pageSizes: [1000, 5000, 10000]
}
You can try this:
pageable: {
pageSize: 10,
buttonCount: 10,
pageSizes: [5, 10, 20, 50, 100, 500]
},