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"
});
});
Related
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);
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
This is my function to call the php file to populate the datatable
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
fetch_data();
function fetch_data()
{
var dataTable = $('#my-example').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
}
i've checked the source of the page on chrome the javascript is executed but not the php, any help would be great.
If you are not included jquery and ajax datatables js file, Please try by including the jquery and ajax data table jquery files.
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
Just javascript is not enough to run ajax datatables. Also you are using
$(document).ready(function(){
So you need to include jquery library as well. Please try by including the above two files and run your code.
this works for me, with or without var dataTable..
fetch_data();
function fetch_data() {
var dataTable = $('#my-example').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
}
});
}
have you included jquery & datatable and is there a table with id="my-example"?
Note: in your example you haven't closed the function with }
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
});
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