DataTables in VisualForce Page, Setting swfPath as Static Resource - javascript

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

Related

fnPageChange is not a function

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);

How to pass json string generated on server side and use it as aparameter in javascript on client side in MVC

Hello everyone this will be my first question!
So basically i want to pass serialized array from server side to client side and then use it as a parameter in JS. For now im sending it as a regular string by viewModel and trying to inject it by using #Html.Raw() as below but it doesn't work:
var table = $('#shipments').dataTable({
"bServerSide": true,
"sAjaxSource": "GetShipmentsAH",
"bProcessing": true,
"bJQueryUI": true,
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('shipID', aData[0]);
},
"aoColumns": #Html.Raw(Model.ShipmentsAoColJSon);
});
This is a value of Model.ShipmentsAoColJSon:
[{"sName":"ID","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"EAN","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"Serial","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"Nr","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"StoreUnitNr","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"FCode","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""},{"sName":"ProdDesc","sDefaultContent":"","bSortable":true,"bSearchable":true,"sSearch":""}]
When i just copy paste it it straight to code it works fine.
Any ideas?
I found a source of a problem. Script was stored in external .js file when i copy pasted it directly to html tag it worked. Is seems that #Html razor can be used only on main html page but no in js files. To handle that i wrote this in my Html:
var ShipAoColJSon = #Html.Raw(Model.ShipAoColJSon);
And then passit to js. file:
var table = $('#shipments').dataTable({
"bServerSide": true,
"sAjaxSource": "GetShipmentsAH",
"bProcessing": true,
"bJQueryUI": true,
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('shipID', aData[0]);
},
"aoColumns": ShipAoColJSon
});

Datatables: Uncaught TypeError: Cannot read property 'copy' of undefined when using Buttons Plugin

I'm trying to initialize my table as:
var table = $("#table-id").DataTable({
"columnDefs": [{
"width": "8%",
"targets": 0
}],
'bSort': false,
bPaginate: false,
bFilter: false,
bInfo: false,
buttons: [
'copy', 'excel', 'pdf'
]
});
But I'm getting an error on Chrome's console that says:
Uncaught TypeError: Cannot read property 'copy' of undefined at dataTables.buttons.min.js:17
It looks like you are missing the appropriate plug-in to include the buttons. Take into account that datatables buttons "are not built into the core, but rather than be included as and when you need them" (buttons doc).
Hence, I would suggest you to either you use the download builder to customize your lib, or include them in separate files. I.e., the following libs are included in the buttons example:
//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.flash.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js
//cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js
Also, you will need the following dom modifier:
dom: 'Bfrtip',
Working jsfiddle demo: https://jsfiddle.net/jufjn9ux/

DataTables Ajax not executing

I am using DataTables version 1.10.2. I am dealing with thousands of data sets so I am using server side processing. I cannot even get the file to run via ajax. I am trying to run the file with test.php which is shown below.
<?php file_put_contents("itworked.txt","itworked"); ?>
I have attempted to create the DataTable with the following tactics, however the file is never created. If I visit the link through a browser then the file is created.
$(document).ready(function() {
$('#playertimes').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://domain.com/HCP/plugins/plugin_Timer/assets/php/test.php"
});
});
$(document).ready(function() {
$('#playertimes').dataTable({
"serverSide": true,
"ajax": "http://domain.com/HCP/plugins/plugin_Timer/assets/php/test.php"
});
});
Why is the file not being called?
Your should read the documentation for datatable 1.10.
some changes where made, thought there is still backward compatibility but i think your should stick with the one of 1.10 upward..
$(document).ready(function() {
$('#playertimes').dataTable({
"processing": true,
"serverSide": true,
"ajax": "http://domain.com/HCP/plugins/plugin_Timer/assets/php/test.php"
});
});

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.

Categories