Is that possible to set maximum number visible rows in $('#gridId').jqxGrid({})? Currently the method is like below
`$('#gridId').jqxGrid({
source: dataAdapter,
autoheight: true,
keyboardnavigation: false,
showfilterrow: true,
filterable: true,
sortable: true,
//max number of row
});`
I am using jQWidgets v2.8.2.
You can enable the Paging feature and set the "pagesize" property. Example: jQWidgets Grid Paging
Related
I have more than 10000 records in my JSON, which I want to show in the Jquery DataTable. Destroying and recreating the table takes more than 10 sec for each function.
Can someone help me optimize the DataTable population, or have any suggestions?
VMSearchDevice.searchGridListIndividual([]); // Observable binded with the datatable
_dtSearchGrid.clear(); //Clears the Table content
_dtSearchGrid.destroy(); //Destroys the table object
VMSearchDevice.searchGridListIndividual(jsonResult); //Populating the observable array
_dtSearchGrid = $('#dtSearchResult').DataTable({ //Intializing the table again
responsive: true,
"sDom": 'Rlfrtip',
"iDisplayLength": 10,
"bScrollCollapse": true,
"bPaginate": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bSortClasses": true,
"sPaginationType": "full_numbers" // To Set Pagination
});
Try using "bDeferRender" feature of DataTables:
Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
"bDeferRender": true
I try reuse 1 table with different amount of data based on different button click, I able to populate data successfully, but the problem is, the header did not populate correctly, I had debug and see the correct amount of column pass into table, but why it still retain the design from the 1st click? the 1st data from the 1st click have 3 column, but in the 2nd click, it still retain the same 3 column instead of 8 column? how to make the header populate correctly?
I try to destroy and recreate, but the code not working well if declare before the table create, any idea?
//if ($.fn.DataTable.fnIsDataTable($(selector)[0])) {
// $(selector).dataTable.fnClearTable();
// $(selector).dataTable.fnDraw();
//}
var oDataTable = $(selector).dataTable({
"sDom": _sDom,
"sPaginationType": "bootstrap",
"bDestroy": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"bSort": tools,
"bAutoWidth": false,
"sAjaxSource": source,
"fnServerParams": function (aoData) {
aoData.push({ "name": "sParams", "value": params });
},
"bProcessing": true,
"oLanguage": {
"sLengthMenu": _displayLen
},
"aoColumns": cols
});
1st button click
2nd button click
Ok, found the answer, after fndestroy, I still need to remove header from table before recreate a new set of header
$(selector).find('thead tr th').remove();
In my dojo dataGrid if i select 7th and 8th rows for example in the first page and if i move to second page by using pagination feature. The rows(7th and 8th row which are selected in first page) are selected by default in the second page also.
Here is my grid:
var grid = new dojox.grid.EnhancedGrid({
id: 'linesGrid',
style: 'width:950px;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"},
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
Set the grid to keepSelection : true. This will maintain the proper rows selected.
You need to do a yourGrid.selection.deselectAll(); before showing the next page.
EDIT:
Part of this question was also discussed here:
not able to call a function on pagination dojo enhancedGrid
I cannot make it to work properly.
I need on initial load to have my table sorted by 0-index column in 'desc'.
I've tried:
$(function() {
ordersTable = $('#orders').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": 'full_numbers',
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{% url get_orders %}",
"aoColumnDefs":[
{"aTargets":[0], "asSorting": ["decs", "asc"]}
]
});
and what it does is sends "sSortDir_0 :'asc'" and displaying "asc" active after that.
How can it make it work? (without faking click on the column to resend the ajax)
Thanks
Ok, I guess I've found it: aaSorting and aaSortingFixed sets the initial sorting. (reference here)
I'm trying to pass additional parameters to the ajax call that is done after selecting a row then clicking delete button. Here's the code I have:
$('#datatable').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bFilter": false,
"iDeferLoading": <%= #count %>,
"sAjaxSource": "redraw",
"fnServerData": fnDataTablesPipeline
}).makeEditable({
sDeleteURL: "delete.rb",
oDeleteParameters:
{
foo: WHAT IS ID
}
});
As you can see, I'm trying to send a parameter foo=ID but I'm not sure how to grab the selected ID of the row.
i have used the following function mentioned in the link below to get the id's of the rows that have been selected and sending them via ajax to the serverside where they get deleted.
hope this solves what you were looking for...
http://datatables.net/examples/api/select_row.html