recently my boss asked me to implement the fixed header plug-in for datatables plug-in in salesforce.
The way my code is designed is that every time search button is clicked i have a callback function to the db as well as an oncomplete function re-initializing the data tables.
Looking at the sample code for fixed headers i put the call to the function new FixedHeader(oTable); inside the initialization block. Instead of getting re-initialized every time, the header is getting created again and again. So with each call i have a new floating header plus the old one in some misplaced corner as well, how do i change this?
function Kudos()
{
oTable = $('.datatable').dataTable({
"iDisplayLength": 100,
"sDom": '<C><"H"T><"clear"><"H">t<"F"ip>',
"bRetrieve": true,
"aoColumnDefs": [ {
"aTargets": [3,4,5,6,7,8,9,10],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if ( sData < "0" ) {
$(nTd).css('color', 'red')
$(nTd).css('font-weight', 'bold')
}
}
} ],
"oTableTools":
{
"sSwfPath": "{!$Resource.SWF_File}",
"aButtons": [
{
"sExtends": "csv",
"sFileName": "PortFolio.csv",
"sButtonText":"Export"
}, "print" ]
},
"oColVis":
{
"activate": "mouseover"
},
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 2, "asc" ]] ,
"bLengthChange": false,
"bFilter": true,
"aoColumns": [
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"}
]
});
new FixedHeader( oTable );
}
k, it seems this in a known bug. the unavailability of something like a destroy function for fixed headers is looking to be included in the next release of FixedHeader plug-in for datatables. basically there is no fix atm
As i am working on Salesforce, it is very easy to re-render parts of the VF page, without reloading the entire page, so i ended up rebuilding the DataTable upon each render. That fixed the issue.
Related
I am new in MVC application, I have handled the large data in Jquery datatable Server side script working fine when all data loaded(ex: Select the all Records in particular table).
If I make manual filter (ex: Select * from xxx where zzz=yyy) then I am not able to send parameters to controller action.
Please find the below script.
$(document).ready(function () {
debugger
var oTable = $('#PartUpdate').dataTable({
"bServerSide": true,
"sAjaxSource": "Test/AjaxHandler",
data: $.param({ 'b':'Mani'}),
"bProcessing": true,
buttons: [
'csv', 'excel', 'print'
],
"aoColumns": [
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return 'View';
}
},
{ "sName": "UserName" },
{ "sName": "FullName" },
{ "sName": "EmailId" }
]
});
});
I was wondering if it is possible to make datatables ask for password first before it is exporting data from datatables to xls file. I tried javascript but apparently datatables uses flash player to export the data to file. So there's no on click event captured in javascript or jquery. Do anyone have the answer? I'll give my code snippet but I don't think it would help. Thanks.
var table = $('.example').DataTable( {
// dom: '<"col_10 pt_5 pb_5"B><"clear">lf',
dom: 'B<"pt_5"l>f',
processing: true,
serverSide: true,
ajax:{
url:'<?php echo site_url().'/student/leads/ajax'; ?>',
cache: false,
data: function(d){
d.startdate = $('#date_from').val(),
d.enddate = $('#date_to').val()
}
},
iDisplayLength: 20,
order: [ [ 0, "desc" ] ],
aLengthMenu: [[20, 50, 100, -1], [20, 50, 100, "All"]],
aoColumns: [
{"sTitle": "id", "sWidth": "8%"},
{"sTitle": "Name", "sWidth": "8%"},
{"sTitle": "E-mail", "sWidth": "12%"},
{"sTitle": "Telp", "sWidth": "8%"},
{"sTitle": "Placement Date", "sWidth": "8%"},
{"sTitle": "Register", "sWidth": "9%"},
{"sTitle": "Teacher State", "sWidth": "11%"},
{"sTitle": "Trial", "sWidth": "7%"},
{"sTitle": "Study", "sWidth": "13%"}
],
buttons: [
{
extend: 'excel',
text: 'Export to Excel'
}
],
bAutoWidth: false
});
You can make two button first which will ask to login to database (create form with input users and password) and then if the users is correct you show an other button which gonna let the user download the xls file.
i am using Datatable FixedHeader Plugin. check my code. but plugin not work properly.
console error occured "TypeError: $.fn.dataTable.FixedColumns is not a constructor"
please give me solution. thanks
$(document).ready(function() {
var table=$("#example").dataTable( {
"bProcessing": false,
"bServerSide": false,
"sort": "position",
"scrollY":"300px",
"scrollX":"200px",
"scrollCollapse": true,
"sAjaxSource": "searchatOrganisations",
"aoColumns": [
{ "mData": "aoId" },
{ "mData": "aoCreatedby" },
{ "mData": "aoCreatedon" },
{ "mData": "aoModifiedby" },
{ "mData": "aoModifiedon" },
{ "mData": "aoName" },
{
"mData": null,
className: "center",
defaultContent: 'Edit / Delete'
}
]
} );
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 1,
rightColumns: 1
} );
} );
TypeError: $.fn.dataTable.FixedColumns is not a constructor
Include Following JS and CSS to get fixed header in DataTable.
https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css
https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js
ref Link: https://datatables.net/download/release
You need to include JS file on your page.
dataTables.fixedHeader.js
I also faced same problem, this is the js which needs to include
Here is the js code that I use. I want to have column 2 sorted in descending order by default.
when I disable bserverside to be false, I get this working (but it does not show all the records when I click next page).
However, if I enable bserverside:true, I get the what I have shown below in the image. if I remove "aaSorting", but keep bserverside:true, it displays all records on pagination. but the records are not sorted and clicking the sort button on the column header does not sort. Moreover, sorting on other columns (which I have included in aocolumns) produce the same image. I cannot figure out what is going wrong. I spent entire weekend trying to figure this out. but have not made any progress yet
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
"sDom": 'T<"clear">lrtip',
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": "{% url 'search_list_json' %}",
"aaSorting": [ [2,"desc" ]],
"iDisplayLength":10,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sClass": "center", "sWidth": "15%","bSortable": false },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%" ,"bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": false}
]
} );
} );
Following code is working for me
$(document).ready(function() {
var dataTable = $('#employee_data').DataTable({
"processing": true,
"serverSide": true,
"aaSorting": [ [0,"desc" ]],
"ajax": {
url: "$urlOne",
type: "post",
error: function()
{
alert('error');
}
}
});
I'm using IgnitedDatatables (CodeIgniter library) for DataTables. The table gets generated without problems but if I search/filter it can only filter one column at a time. If I set "bServerSide" to false it works but then I lose the server-side functionality.
In the examples, this one is working:
http://datatables.net/release-datatables/examples/ajax/custom_data_property.html
while this isn't (server-side):
http://datatables.net/release-datatables/examples/data_sources/server_side.html
Is this not possible to achieve when running server-side?
This is my JSON response (shortened and with replaced data):
{"sEcho":0,"iTotalRecords":45438,"iTotalDisplayRecords":45438,"aaData":[["abc","12345","example#example.com","","","2010-01-27 22:31:10","Edit<\/a> Delete<\/a>"],["abc2"," test123","test#test.com","","","2008-06-15 22:09:33","Edit<\/a> Delete<\/a>"]],"sColumns":"fname,lname,email,phone,cellphone,created,edit"}
JavaScript code:
$("#members").dataTable( {
"bProcessing": true,
"bServerSide": true,
'sAjaxSource': '<?php echo base_url();?>members/listener',
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": 'POST',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"bLengthChange": false,
"aaSorting": [[ 0, "asc" ]],
"iDisplayLength": 15,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumnDefs": [
{ "sName": "fname", "aTargets": [ 0 ] },
{ "sName": "lname", "aTargets": [ 1 ] },
{ "sName": "email", "aTargets": [ 2 ] },
{ "sName": "phone", "sWidth": "80px", "aTargets": [ 3 ] },
{ "sName": "cellphone", "sWidth": "100px", "aTargets": [ 4 ] },
{ "sName": "created", "sWidth": "120px", "aTargets": [ 5 ] },
{ "bSortable": false, "sName": "edit", "sWidth": "115px", "aTargets": [ 6 ] }
]
});
Thank you!
Well, the problem if you filter server side is that you are filtering through an SQL query and this is what is written on the example you posted;
Filtering
NOTE this does not match the built-in DataTables filtering which does it
word by word on any field. It's possible to do here, but concerned about efficiency
on very large tables, and MySQL's regex functionality is very limited
Basically you could do what you want to do (a regular expression match an all columns) but it's going to kill the performance server side.
What i usually do is provide a filter for each column, i need to filter.