IE only has sort option for first 8 columns
IE only has sort option for first 8 columns
I have a table with 9 columns(11 if the logged in user is an administrator), all of which should be sortable. This works fine in FF and Chrome, but in IE only the first 8 columns can be sorted. I was just given this code yesterday, so I am not really familiar with how datatables works. I am trying to figure out how to make all 9/11 columns sortable in IE like they are in FF and Chrome.
Code:
[code]function refreshTable(){
var data = {"workType":$("#workType").val(),
"status":$("#status").val()}
$("#tableContainer").load("../ajax/workRequestsTable.php<?php echo $requestTypes; ?>", data, function(){
oDataTable = $("#workRequests").dataTable({"bStateSave": true,"bFilter": false,"bInfo": false,"sPaginationType":"full_numbers", "iDisplayLength":100,"bSearchable":false, "aaSorting":[[1,"desc"]]});
})
}
$(document).ready(function(){
refreshTable();
$("#status, #workType").change(function(){
refreshTable();
});
})[/code]
and the css:
[code]div.filter {
float:left;
margin:10px 10px 10px 0px;
}
#workRequests {
font-size: 12px;
}
#workRequests thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
color: #ffffff;
background-color: #613319;
* cursor: hand;
}
#workRequests tbody tr {
height: 40px;
}
.sorting_asc {
background: #613319 url('images/sort_asc.png') no-repeat center right;
}
.sorting_desc {
background: #613319 url('images/sort_desc.png') no-repeat center right;
}
.sorting {
background: #613319 url('images/sort_both.png') no-repeat center right;
}
.even {
background-color: #DFCA99;
}
.odd {
background-color: #FFE9B2;
}
.dataTables_info{
margin-top: 10px;
}
.dataTables_paginate{
margin-top: 10px;
}
.paginate_button{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
margin: 0px 2px 0px 2px;
border: solid 1px #000000;
cursor: pointer;
background-color: #FFE9B2;
}
span.paginate_button:hover {
background-color: #DFCA99;
}
.paginate_active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
margin: 0px 2px 0px 2px;
border: solid 1px #000000;
background-color: #FFC12F;
}[/code]
Any help?
Code:
[code]function refreshTable(){
var data = {"workType":$("#workType").val(),
"status":$("#status").val()}
$("#tableContainer").load("../ajax/workRequestsTable.php<?php echo $requestTypes; ?>", data, function(){
oDataTable = $("#workRequests").dataTable({"bStateSave": true,"bFilter": false,"bInfo": false,"sPaginationType":"full_numbers", "iDisplayLength":100,"bSearchable":false, "aaSorting":[[1,"desc"]]});
})
}
$(document).ready(function(){
refreshTable();
$("#status, #workType").change(function(){
refreshTable();
});
})[/code]
and the css:
[code]div.filter {
float:left;
margin:10px 10px 10px 0px;
}
#workRequests {
font-size: 12px;
}
#workRequests thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
color: #ffffff;
background-color: #613319;
* cursor: hand;
}
#workRequests tbody tr {
height: 40px;
}
.sorting_asc {
background: #613319 url('images/sort_asc.png') no-repeat center right;
}
.sorting_desc {
background: #613319 url('images/sort_desc.png') no-repeat center right;
}
.sorting {
background: #613319 url('images/sort_both.png') no-repeat center right;
}
.even {
background-color: #DFCA99;
}
.odd {
background-color: #FFE9B2;
}
.dataTables_info{
margin-top: 10px;
}
.dataTables_paginate{
margin-top: 10px;
}
.paginate_button{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
margin: 0px 2px 0px 2px;
border: solid 1px #000000;
cursor: pointer;
background-color: #FFE9B2;
}
span.paginate_button:hover {
background-color: #DFCA99;
}
.paginate_active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
margin: 0px 2px 0px 2px;
border: solid 1px #000000;
background-color: #FFC12F;
}[/code]
Any help?
This discussion has been closed.