My JavaScript looks as follows:
$(document).ready(function () {
oTable = $('#ecTable').dataTable({
"sScrollY": "580px",
"sScrollX": "600px",
"bPaginate": false,
"bScrollCollapse": true,
"bProcessing": true,
"bInfo": true,
"aaSorting": [[0, 'desc']]
});
});
And the resulting table looks as follows:
As you can see, something isn't right. I can't seem to get DataTables to actually display the X scroll bar.
Try this..
"sScrollXInner": "100%",
"sScrollX": "100%"
Related
I am trying to get the data from a jqGrid (free version and latest version) and it's suppose that I get:
all the data if none is selected
the selected data if any
This is how I am doing it:
$(function () {
var $order_logs = $('#order_logs');
$order_logs.jqGrid({
url: Routing.generate('api_order_logs'),
datatype: "json",
colModel: $colmodel.data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
rownumWidth: 60,
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_order_logs_cb,#jqgh_order_logs_rn,#jqgh_order_logs_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', {
caption: 'Export',
title: 'Export',
onClickButton: function () {
var filteredData = $order_logs.jqGrid("getGridParam").lastSelectedData,
allData = $order_logs.jqGrid('getGridParam', 'data');
exportData(filteredData, allData);
}
});
});
function exportData(filteredData, allData) {
if (filteredData.length === 0 || allData.length === 0) {
alert('There is no data to export');
return;
}
// Export only the filtered data
if (filteredData.length > 0) {
return;
}
// Export all the grid data
}
For some reason the value of allData is always an empty array and I am not sure since I am using the same code as everyone is using out there and found in a lot of answer here in SO.
UPDATE:
Currently the grid is holding six columns and a set of 60 records as total paginated by 20 each time however you can change the pagination to be 50 or 100.
Can any tell me why is this?
I'd recommend to use loadonce: true, forceClientSorting: true options in case of small dataset: less at 1000 or 10000 rows. It simplifies the code server side and you can use full functionality of free jqGrid. The problem with access to lastSelectedData and data will be solved.
More then that, you can easy use many advanced features like createColumnIndex: true, generateValue: true of generateDatalist: true options and so on. See demos included in README of version 4.14.1. Good and comfortable filtering of the data is, in my option, the part of displaying the data. Having the data locally allows to find unique values and build <select> in the filter bar or to use <datalist> to have autocomplete functionality.
I have this script that works but it totally removes the pagination and display all the data, what I need is just to hide the pagination. any idea ?
I tried this but this is a different approach
how to remove pagination in datatable
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"paging": false,
"ordering": false,
"bLengthChange": false,
"info": false
});
} );
</script>
Set "bPaginate" to false in the datatable configuration.
Try this code:
$('#table_id').dataTable({
"bInfo": false,
"paging": false,
"bPaginate": false,
})
I am using the following setting which loads all the data from the server at once:
loadonce: true
Now I attempt to reload the grid after an edit:
// options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: true,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true,'']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
The data is refreshed from the server however, there is an issue: For example, If I edit a record in page 2, it shows page 2 on the navbar on the bottom but it always brings up the data from page 1. Any help would be appreciated. Thanks.
Update #1
I tried the following code:
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
Then I edit and click on submit, it still loads page 1 data even though the navbar stays on page 2. Then I click the forward arrow to go to page 3, then the back arrow to go to page 2 again and now it shows the page 2 data.
Update #2
Here is additional relevant code of all I am doing and still not working:
...
cmTemplate: { editable: true, editrules: { edithidden: true } },
pager: "#jqGridPager",
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'lastName, firstName',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
gridview: true,
recreateForm: true,
width: 1140,
height: "auto",
multiselect: false,
altRows: false,
shrinkToFit: true,
scroll: false
}
});
...
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: true,
view: true,
refresh: true,
position: "left",
cloneToTop: false,
beforeRefresh: function () {
//Note: This function is only called after user clicks the refresh button
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
},
// Options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: false,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true, '']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
...
FINAL OUTCOME
I finally got the issue resolved! I switched from the not free Guriddo jqGrid to free jqGrid by Oleg and the bug was gone! I originally could not get the navigation buttons to appear on the free jqgrid but the reason they didnt appear is because I had the tag iconSet: "fontAwesome" and I did not reference that font. When I removed that tag completely, everything worked perfect. You can use that tag but you must reference the iconset url. In my case I did not need a different icon set.
You can use page option of reloadGrid (see the answer for the corresponding demo). You can use $(this).jqGrid("getGridParam", "page") to get page parameter, which hold the current page.
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true]; // no error
}
I used current: true option of reloadGrid to select the currently selected row after reloading of the grid.
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.
Found the documentation here
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching
I want JQgrid filterToolbar blank top row in the grid hidden till the user use Toggle button to show. How do I do that?
myGrid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false },{}, {}, {}, { multipleSearch: true, overlay: false });
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
myGrid.jqGrid('navButtonAdd', '#pager',{ caption: "Filter", title: "Toggle Searching Toolbar",buttonicon: 'ui-icon-pin-s',onClickButton: function () { myGrid[0].toggleToolbar(); }});
It seems to me that you need just add one more line at the end of your code:
myGrid[0].toggleToolbar();
See the demo.
This can also be achieved through below code snippet.
jQuery("ui-search-toolbar").hide();