How to add fixed column plugin in datatable version 1.9 - javascript

I am trying to add fixed column plugin to my jquery datatable v 1.9. But I couldn't find the required js file(s) that I need to import. So when I try to call like this:
var oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/VMS/Customer/_index",
"bProcessing": true,
"aLengthMenu": tablelength(),
"bJqueryUI": true,
"bAutoWidth": false
}
new FixedColumns(oTable, {
"iLeftColumns": 2,
"iLeftWidth": 350
});
In the console it says Uncaught ReferenceError: FixedColumns is not defined. Please someone tell me which files should I download and import and if any other changes are required?
Note: I am not allowed to use any other version of datatable

As it's being said, FixedColumns is not defined and this is not the right way to do it.
Rather use :
new $.fn.dataTable.FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 350
});
Per the v1.9 & the FixedColumns doc.
Don't forget to add the required files :
cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css
cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js

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

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.

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

Categories