fnPageChange is not a function - javascript

I am getting the subject error when using the following:
$("#example1").DataTable().fnPageChange(localStorage.getItem('page'),true);
From what I understand, it saves the last page of the datatable that the user clicked on. If the user has clicked on the 3rd page of the datatable, navigates to another page and then goes back to the datatable, it will still be on the 3rd page of the datatable.
And it works. The last page of the datatable is saved.
The only problem is, even though the above works, I am getting the following error in the console:
Uncaught TypeError: $(...).DataTable(...).fnPageChange is not a function
I am not sure why.
Here are some other datatable setting I have:
"iDisplayLength": 50,
"order": [[ 1, "desc" ]],
"paging": true,
"scrollY": 300,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
"sPaginationType":"full_numbers",
"autoWidth": false,
"deferRender": true,
"dom": 'Bfrtip',
Why am I getting the above console error and how can I fix it?

Your use of the "stateSave": true option is what is allowing a user to return to page 3 of the DataTable, after leaving the web page entirely, and then returning.
It also saves filters and sorting selections.
If you want to do something manually, which is not handled for you by "stateSave": true, then you can use the DataTables page change event. The documentation gives an example:
$('#example').on( 'page.dt', function () {
var info = table.page.info();
$('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
} );
Otherwise, you can delete that line which is throwing the error - and state saving should not be affected.
Regarding fnPageChange - this is an old plug-in which has been removed from DataTables - you can see a note about this here.

DataTable começa com minúsculo é um camel case.
$("#example1").DataTable().fnPageChange(localStorage.getItem('page'),true);
change to
$("#example1").dataTable().fnPageChange(localStorage.getItem('page'),true);

Related

Pagination is not searching for records and not sorting my columns

I'm using the jQuery pagination plugin but I'm not able to get my data to be searched or sorted by columns.
I've searched for the documentation and also watched some videos explaining how to perform this procedure, but without success.
Right now my code looks like this:
dtAjax = $('#' + pTabela).DataTable(
{
"order": [[1, 'desc']],
responsive: true,
pageLenght: 50,
searching: true,
processing: true,
serverSide: false,
deferLoading: pTotalRegistros
}
My server Side necessarily needs to be "true", otherwise the pagination will not work properly.
However, when I leave the serverSide as "true", the functionality of searching and sorting the columns is not working, only when the serverSide is set to "false".
I have no idea how to solve this anymore, in case someone can save me..

DataTables - CSV Only Exports Current Rows

I have the following code
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/functions/ajax.asp",
"ordering": false,
"bFilter": false,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
I have around hundreds of rows but when I select the an option such as CSV, it only exports what is on the screen.
Any ideas?
Thanks
The problem here is that you're using server-side processing, so the client-side dataTables plugin only has access to the data on the screen to export! You'll have to make something custom to get this data from the server.
Check out this post for a quick example: Server side excel export with DataTable
That is expected behavior for the export buttons in DataTables. They always simply export the data that is currently displayed on the screen. If you want to allow the user to export all data (and don't want to write a custom export function - if you do, see #Adam's answer), consider adding a lengthMenu option to your DataTable. This will allow users to change the number of records displayed per page, which can in turn let them show/export all records. The syntax for the lengthMenu parameter is as follows.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
The first array shows the number of records to display for each option (in this case, 10, 25, 50, and all (-1 is all)), and the second array is what should be displayed in the user's dropdown menu.
See this stack overflow question for more detail on the topic.

Datatables pagination

I have this code:
$('#ldap-users, #audit-users').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"bInfo": false,
"bProcessing": true,
"bPaginate" : true,
"sPaginationType": "bootstrap",
'aaSorting': [[1, "desc" ]],
});
I got this error:
Uncaught TypeError: Cannot read property '_iDisplayStart' of null
When i click pagination button
This is caused by
"sPaginationType": "bootstrap",
Remove / comment that line and you are ok. Guess you need the nessecary plugin, see ->
http://datatables.net/plug-ins/pagination which says :
Note that this plug-in uses the fnPagingInfo API plug-in method to
obtain paging information
The sourcecode for that plugin is listed below.
The , after the last entry (aaSorting) is wrong. Remove it and try it again.

DataTables in VisualForce Page, Setting swfPath as Static Resource

I have been working with the DataTables library in VisualForce and have everything working except for the export features. I followed the sample initialization on the DataTables website, but am getting an error that ZeroClipboard.js is undefined in the TableTools.js file.
However, I have checked and re-checked multiple times and the zeroclipboard.js is listed as a resource in the Chrome.
The only thing I am doing differently, and was not able to determine in adapting the function to VisualForce was how to properly call the swf file. Currently I am hosting the file on a local server and referencing it explicitly in the function. Could this be my issue? The error above does not seem to be related, but it is the only thing left I think after extensive troubleshooting.
Does anyone know how I can make the swf file a static resource in Salesforce and call it that way from the function so the file is on the same server as everything else?
Below is my current function setting up DataTables (Question in reference to the swfPath: call, how do I do this with a static resource?)
var oTableTools = new TableTools( oTable, {
"sSwfPath" : "www.MyWebsite.com/resources/copy_csv_xls_pdf.swf",
"buttons": [
"copy",
"csv",
"xls",
"pdf",
{ "type": "print", "buttonText": "Print me!" }
]
});
$('#demo').before( oTableTools.dom.container );
       
You can do this by uploading swf file(you can find this in the media/swf/copy_csv_xls_pdf ) as a static resource in salesforce and then accssesing it
For example
oTable = $('#example').dataTable(
{
"iDisplayLength": 20,
"sDom": '<C><"H"T><"clear"><"H"l>t<"F"ip>',
"oTableTools": {
"sSwfPath": "{!$Resource.SWF_File}"
},
"oColVis":
{
"activate": "mouseover"
},
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 2, "asc" ]] ,
"bLengthChange": false,
"bFilter": true

jqGrid: Sorting local data clears grid

I've found similar but not identical questions on here; none of their posted answers solve this.
I have local data loaded using addJSONData. When you click a column header to sort, the grid is wiped. There are no errors in the web console/firebug. Data added by later calls to addJSONData is sorted by the selected column, at least.
My config:
jQuery('#attributes').jqGrid({
sortable:true,
datatype:"local",
colNames: cols,
colModel: colmods,
cmTemplate: {width:155, align:"left"},
multiselct: false,
shrinkToFit:false,
caption: "Node Attributes",
scroll: true,
footerrow: true,
userDataOnFooter: true,
rowNum: -1
});
My only idea is to save the data onSortCol and reload it in loadComplete. I don't much like that though. I've tried various combinations of rowNum: 9007199254740992, loadonce: true and others.
I've tried jqGrid versions 4.2.0 and 4.4.0 (in which rowNum: -1 is supported again).
Edit: The line that clears the data is the emptyRows bit in the sortData function:
if(ts.p.scroll) {
var sscroll = ts.grid.bDiv.scrollLeft;
emptyRows.call(ts, true, false);
ts.grid.hDiv.scrollLeft = sscroll;
}
Seems like the data should be saved before this happens, but I'm not familiar with this code to know where the data actually lives.
I'm newcomer to jqGRid (I only started to use it 3 days ago...) but, if you are using local, don't you also have to specify loadonce:true for sorting and paging to work?
I had a similar issue. I stumbled onto a fix though. After setting loadonce: true, if you hit the refresh button in the pager and then try to sort, it works fine.
So I force a click on the refresh button by doing something like: $(".ui-icon-refresh").trigger('click');
I ran this on the onClose event because that suited my requirements. You can check out my entire explanation on this issue here: Make 'Search' remote and everything else (sorting, pagination, etc) local in jqGrid

Categories