Using the last version of DataTable (1.10.9) and the scroller widget (1.3.0), I can't make it work with this simple piece of code:
var data = [{'a': 'a', 'b': 'b'}, {'a': 'c', 'b': 'd'}];
var columns = [{'title': 'a', 'data': 'a'}, {'title': 'b', 'data': 'b'}];
$("#mytable").DataTable({
"processing" : true,
"filter": false,
"orderClasses": false,
"ordering": false,
data: data,
deferRender: false,
scrollY: 400,
scrollCollapse: true,
scroller: {
loadingIndicator: true
},
dom: "rtiS",
columns: columns,
});
As a result, I have an empty table with message "Showing NaN to -Infinity of 2 entries". WIthout the scroller widget, it is working fine (but I need it).
What did I miss?
I found the reason => I apply DataTable from an ajax response that also insert the table into the DOM.
Calling the JS in a $(document).ready causes the bug.
Using a setTimeout avoids the bug ...
Related
I am using server side jquery datatable 1.10.16. I am want to reload the data by requesting the datatable ajax with updated parameters.
To reload the datatable I am using the below datatable api:
$('#user_data').DataTable().ajax.reload();
My datatable initailization is given below:
$('#user_data').DataTable({
// to hide search filter
"searching": false,
"lengthMenu": [[5, 25, 50], [5, 25, 50]],
processing: true,
serverSide: true,
ajax: {
"url": '/admin/getStats',
"data": {user_id: user_id, date_range: JSON.stringify(DATE_RANGE)},
},
columns: [
{data: 'name', name: 'name'},
{data: 'date', name: 'date'},
{data: 'country', name: 'country'}
]
});
DATE_RANGE and user_id are global variables which are updated like this:
$('#dateSelector').on('apply.daterangepicker', function(ev, picker) {
DATE_RANGE[0] = picker.startDate.format('DD-MM-YYYY');
DATE_RANGE[1] = picker.endDate.format('DD-MM-YYYY');
console.log(DATE_RANGE); // here I am getting updated value properly
// reloading the datatable , but the parameters are the previous one
$('#user_data').DataTable().ajax.reload();
});
How to pass updated parameters ?
Disable caching for the table in the oSettings [this param is changing based on the DT version. Refer documentation of the version you are using.]
After calling
table.ajax.reload();
call this immediately:
table.ajax.clearAjaxParams();
Again this changes with version based. Refer documentation.
Finally solved it somehow. In future people may need:
$(document).ready(function() {
fetchData();
});
function fetchData() {
$('#user_data').DataTable({
// to hide search filter
"searching": false,
"lengthMenu": [[5, 25, 50], [5, 25, 50]],
processing: true,
serverSide: true,
ajax: {
"url": '/admin/getStats',
"data": {user_id: user_id, date_range: JSON.stringify(DATE_RANGE)},
},
columns: [
{data: 'name', name: 'name'},
{data: 'date', name: 'date'},
{data: 'country', name: 'country'}
]
});
}
$('#dateSelector').on('apply.daterangepicker', function(ev, picker) {
.....
....
$('#user_data').DataTable().destroy();
fetchData();
});
I think if you just redraw the dataTable, a new post request with the updated parameters will be sent to the server.
$('#dateSelector').on('apply.daterangepicker', function(ev, picker) {
$('#user_data').DataTable().draw();
}
I have an issue with jqGrid 4.6.0
When I try to get the row data it changes each data to a string I need to parse them to get the actual int or boolean values what is strange is that when I see the rowobject inside a custom formatter the rowdata seems correct
Here is the sample code and jsfiddle link for the sample I created
var myformatter = function (cellval, options, rowObject)
{
// rowObject is correct here {id: 1, Name: "test1", IsActive: true, Count: 10}
var active = rowObject.IsActive;// here active is true/false which is good
var count = rowObject.Count; // here count is 10,20,30 which is good
if(active )
{
// do what ever
}
return cellval;
}
var mydata = [
{id:1, Name: "test1", IsActive: true, Count: 10},
{id:2, Name: "test2", IsActive: false, Count: 20},
{id:3, Name: "test2", IsActive: false, Count: 30} ];
var grid = $("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Name','Is Active','Count'],
colModel :[
{name:'id', index:'id', width:55},
{name:'Name', index:'Name', width:90},
{name:'IsActive', index:'IsActive', width:90, editable: true ,formatter:myformatter},
{name:'Count', index:'Count', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
});
var row = $('#list').jqGrid('getRowData', 1);
// row is: {id: "1", Name: "test1", IsActive: "true", Count: "10"}
// What I was expecting {id: 1, Name: "test1", IsActive: true, Count: 10}
You should use getLocalRow method instead of getRowData to solve your problem. It's important to understand that getRowData get the text from <td> element. Thus the standard type of data is always string. The method getLocalRow just get the reference to internal element of data array with original data.
One more remark: it's recommended to define unformatter (unformat callback) formatter always if one defines custom formatter.
One can see that you use editing of data. The standard editing will change the type of data on modification. Thus you will have the same problem as before. Free jqGrid allows to fix the problem by specifying convertOnSave callback for the column. See the wiki article for more details. Additionally free jqGrid support some standard column templates, which simplifies the data conversion for Boolean, integer and numbers. On can add template: "integer" property in the Count column (see the template definition here) and to add template: "booleanCheckbox" (see here). You can debug the demo for example and verify that the types of properties of data will be hold correctly after editing.
I'm looking for a excel like table for my app then at my search I saw this Handsontable but one also of my requirements is groupings on the table.
Is it possible at Handsontable a ful length row like this?
I'm not sure what you mean by 'full length row' but a couple of options that may help you are:
Rendering custom html
This allows you to manipulate both the headers and cells. Example:
var $container = $("#example2");
$container.handsontable({
colHeaders: function (col) {
switch (col) {
case 0: //First column header
return "<b>Bold</b> and <em>Beautiful</em>";
case 1: //Second column header
var txt = "Some <input type='checkbox' class='checker' ";
txt += isChecked ? 'checked="checked"' : '';
txt += "> checkbox";
return txt;
}
}
});
or
Column stretching
This lets you stretch a column to fill the row to a 'full length row'. Example option to stretch the last column:
stretchH: 'last'
I think what your looking at is merging cells. It exists two different ways to merge cells with HandsonTable.
You can either directly specify the merges you want in the options:
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
mergeCells: [
{row: 0, col: 0, rowspan: 1, colspan: 4}, // for description
{row: 3, col: 4, rowspan: 2, colspan: 2}, // any other merges
{row: 5, col: 6, rowspan: 3, colspan: 3}
]
});
or create an array with all the merges and give it later to the table:
var mergeArr = new Array();
var descriptionMerge = {
row : 0,
col : 0,
rowspan : 1,
colspan : 4
}
mergeArr.push(descritpionMerge);
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
mergeCells: mergeArr
});
row: starting row of the merge.
col: starting col of the merge.
rowspan: number of rows that will be merged from the starting row.
colspan: number of cols that will be merged from the starting col.
In your case, you want a full length row, so you need to merge cells in this way :
{row: yourStartingRow, col: yourStartingCol, rowspan: 1, colspan: lengthOfYourTable}
HandsonTable documentation: http://docs.handsontable.com/0.15.1/demo-merge-cells.html
Bonus: If you want to center the text in your merged cells, just use the className : "htMiddle" option.
http://docs.handsontable.com/0.17.0/demo-alignment.html
If you want to group headers, you can used the nested headers to do this:
The code uses the "NestedHeaders" tag like so:
var example1 = document.getElementById('example1');
var hot = new Handsontable(example1, {
data: Handsontable.helper.createSpreadsheetData(5,10),
colHeaders: true,
rowHeaders: true,
nestedHeaders: [
['A', {label: 'B', colspan: 8}, 'C'],
['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
]
});
See more on the handsontable documentation
I am using Datatable in my ruby on rails application. I follow the same one which is here..
https://github.com/rweng/jquery-datatables-rails
And My datatable sorting and searching working properly. But I can't see my table tool option (eg - copy, csv, excel, pdf, save ) in my table header.
I want to show my table just like this....
Please help.
i got this by adding ZeroClipboard.js
<script src="http://localhost/assets/js/ZeroClipboard.js"></script>
Update (2016):
Although they are retiring the TableTools for Buttons and Select extensions (source), this is a slightly more recent version of the dom option example:
var oTable = $('#my-table').dataTable({
autoWidth: false,
autoHeight: false,
paging: false,
dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
responsive: false,
searching: true,
ordering: true,
stateSave: true,
scrollY: 550,
scrollX: true,
scrollCollapse: true,
fixedHeader: false,
buttons: [
'copyHtml5',
'csvHtml5',
'excelHtml5',
'pdfHtml5'
],
columnDefs: [{
targets: 'no-sort', // disable sorting on class="no-sort"
orderable: false
}],
drawCallback: function (settings) { }
});
Previous Answer (2013):
The solution is to add this:
"sDom": '<"H"TCfr>t<"F"ip>'
Inside your javascript. It will work with show/hide columns nicely as well. If you are not using show/hide columns you can remove the capital "C".
Example (with show/hide columns):
// Users
$("#users-datatable").dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $('#users-datatable').data('source'),
"bScrollInfinite": true,
"bScrollCollapse": true,
"iDisplayLength": 100,
"sScrollY": "500px",
"sScrollX": "100%",
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Your custom message would go here."
},
"print"
]
}
});
Hopefully this will help someone.
I'm using datatables with the jeditable plugin, I have it setup to update directly to mysql, I need to validate some input fields to make sure a URL is being inserted. I have this code which validates jeditable fields (see jsfiddle) I need some help to integrate the jsfiddle with the table initializing code. I can add the onsubmit no problem but not sure how to add this part into my .makeEditable function, any help's appreciated thanks.
$('#url').editable(function(valurl) {
// Do your own stuff here...
return valurl;
},
http://jsfiddle.net/peter/CLuvp/
And my datatable is initialized with
var oTable3;
$(document).ready(function() {
oTable3 = $('#table3').dataTable( {
"sDom":'t<"bottom"ifpl><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false},
null,
null,
null,
null
]
}
).makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null,
null,
{
type: 'text',
submit:'Ok',
cancel:'Cancel',
width: "100px"
}
I think you can simply include the options for each column in the aoColumns option, e.g.:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
onsubmit: function() {...}
}]
});
A cleaner way (or the aforementioned simply doesn't work) would be to use the url rule in that column:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
cssclass: 'url'
}]
});
See this demo for more details.