1

I have created a Visual force page and using Jquery plugin in it...but when i am applying my style to the table for changing the font size, type and background color of the table its not working.

Following is the code:

<style type="text/css">
.sorting {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_both.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important; 
} 
table.dataTable tr.odd { background-color: white; }
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: white; }
table.dataTable tr.odd td.sorting_2 { background-color: white; }
table.dataTable tr.odd td.sorting_3 { background-color: white; }
table.dataTable tr.even td.sorting_1 { background-color: white; }
table.dataTable tr.even td.sorting_2 { background-color: white; }
table.dataTable tr.even td.sorting_3 { background-color: white; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    padding: 0px;
}
</style>
<!-- Style End -->


<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
<script type="text/javascript" language="javascript">
var j$ = jQuery.noConflict();
j$('table.dataTable').dataTable({
    "sPaginationType" : "full_numbers",
    "iDisplayLength": 5, // display number of records
    "bFilter": false, // Make Filer True/False
    "bSort":false, // Make sorting True/False
    "bInfo": false,
    "bPaginate": true, // Make pagination true/false
    "bLengthChange" : false // hide length change dropdown
});
</script>

Any suggestions for this?

jack
  • 11
  • 1
  • 2
  • 1
    Am I missing something? It doesn't look like any of your code touches the font type or size. Either way, this looks like a css/html/jquery issue. I'd recommend troubleshooting the resulting html and working out what's not working there. It doesn't look like it's a Visualforce issue. For more information on how to do this, see: http://salesforce.stackexchange.com/questions/36715/how-do-i-start-to-debug-my-own-visualforce-javascript – Nick C Jul 10 '14 at 12:32
  • If you're trying to replace the standard SF Stylesheet, then you need to add standardStylesheets="false" to the <apex:page standardController=xxxxx> that normally would be at the top of the page to override the default stylesheet. – crmprogdev Jul 10 '14 at 14:51
  • Hello, jack, it would be helpful if you could post your full Vf page code using something like pastebin so that others can better understand what you're trying to do. Also, a diagram of some sort illustrating your desired output would be helpful. – Marty C. Jul 11 '14 at 04:05

0 Answers0