jeudi 29 janvier 2015

Datatables aaSorting is not sorting by the correct column


I am trying to get a roster page to sort by player number onload. I plugged in aaSorting and told it to sort the first column (the number) but it is sorting the second column (name). Can someone please tell me what I did wrong?



<style type="text/css">table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE" }
</style>

<!--<script src="/jscript/sorttable.js"></script>
--><script type="text/javascript">
$(document).ready(function() {
$(".table-sortable").dataTable({
aaSorting: [[0, 'asc']],
bPaginate: false,
bFilter: false,
bInfo: false,
bSortable: true,
bRetrieve: true,
aoColumnDefs: [
{ "aTargets": [ 0 ], "bSortable": true },
{ "aTargets": [ 1 ], "bSortable": true },
{ "aTargets": [ 2 ], "bSortable": true },
{ "aTargets": [ 3 ], "bSortable": true }
]
});
});</script>





<table width="100%" cellpadding="2" cellspacing="2" border="1" class="sortable" id="roster" style="border-bottom:1">
<thead>
<tr>
<?php if( ! empty($vars['sport']->field_sport_show_number) && 1 == $vars['sport']->field_sport_show_number['und'][0]['value'] ): ?>
<th class="style4, sortBy" style="width: 14px;" data-sortType="numeric" id="number"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">#</span></th>
<?php endif; ?>

<th class="style4" style="width: 14px;" ><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Name</span></th>

<?php if( ! empty($vars['sport']->field_show_class) && 1 == $vars['sport']->field_show_class['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Class</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_position) && 1 == $vars['sport']->field_show_position['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Position</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_height) && 1 == $vars['sport']->field_show_height['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Height</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_weight) && 1 == $vars['sport']->field_show_weight['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Weight</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_b_t) && 1 == $vars['sport']->field_show_b_t['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">B/T</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_hometown) && 1 == $vars['sport']->field_show_hometown['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Hometown</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_highschool) && 1 == $vars['sport']->field_show_highschool['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Highschool</span></th>
<?php endif; ?>
</tr>
</thead>
<tbody>
<?php $i=0; foreach($vars['athletes'] as $athlete): ?>
<tr style="border:1; border-bottom:1px;">
<?php if( ! empty($vars['sport']->field_sport_show_number) && 1 == $vars['sport']->field_sport_show_number['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo $athlete->field_athleets_number['und'][0]['value'] ?>
</span></td>
<?php endif; ?>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a href="#" href="" rel="imgtip[<?php echo $i; ?>] "><?php echo $athlete->title ?>
</span></td>

<?php if( ! empty($vars['sport']->field_show_class) && 1 == $vars['sport']->field_show_class['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_class['und'][0]['value'] ) ? $athlete->field_class['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_position) && 1 == $vars['sport']->field_show_position['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_position['und'][0]['value'] ) ? $athlete->field_position['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_height) && 1 == $vars['sport']->field_show_height['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_height['und'][0]['value'] ) ? $athlete->field_height['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_weight) && 1 == $vars['sport']->field_show_weight['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_weight['und'][0]['value'] ) ? $athlete->field_weight['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_b_t) && 1 == $vars['sport']->field_show_b_t['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_b_t['und'][0]['value'] ) ? $athlete->field_b_t['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_hometown) && 1 == $vars['sport']->field_show_hometown['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_hometown['und'][0]['value'] ) ? $athlete->field_hometown['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_highschool) && 1 == $vars['sport']->field_show_highschool['und'][0]['value'] ): ?>
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<?php echo ( $athlete->field_high_school_state['und'][0]['value'] ) ? $athlete->field_high_school_state['und'][0]['value'] : 'No Data' ?>
</span></td>
<?php endif; ?>
</tr>
<?php $i++; endforeach; ?>
</tbody>
<tfoot>
<tr>
<?php if( ! empty($vars['sport']->field_sport_show_number) && 1 == $vars['sport']->field_sport_show_number['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">#</span></th>
<?php endif; ?>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Name</span></th>

<?php if( ! empty($vars['sport']->field_show_class) && 1 == $vars['sport']->field_show_class['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Class</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_position) && 1 == $vars['sport']->field_show_position['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Position</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_height) && 1 == $vars['sport']->field_show_height['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Height</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_weight) && 1 == $vars['sport']->field_show_weight['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Weight</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_b_t) && 1 == $vars['sport']->field_show_b_t['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">B/T</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_hometown) && 1 == $vars['sport']->field_show_hometown['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Hometown</span></th>
<?php endif; ?>

<?php if( ! empty($vars['sport']->field_show_highschool) && 1 == $vars['sport']->field_show_highschool['und'][0]['value'] ): ?>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Highschool</span></th>
<?php endif; ?>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("roster"));
</script>


Page output



<h1 class="field-content h1 font-sizesmall ">Athletics: Baseball: Roster</h1> </div> </div>
</div>






</div> </div>
</div>
<div id="block-system-main" class="block block-system">


<div class="content regularcontent">
<div id="node-243" class="node node-page" about="/athletics/bb/roster" typeof="foaf:Document">




<div class="content clearfix regularcontent">
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>


<style type="text/css">table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE" }
</style>

<script src="/jscript/sorttable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#roster').dataTable( {
"aaSorting": [[ 0, "asc" ]]
} );
} );</script>





</p><table class="sortable" id="roster" style="border-bottom:1" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th class="style4, sortBy" style="width: 14px;" data-sorttype="numeric" id="number"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">#</span></th>

<th sortdir="down" class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Name</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Class</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Position</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Height</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Weight</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">B/T</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Hometown</span></th>

</tr>
</thead>
<tbody>























<tr style="border:1; border-bottom:1px;">
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
17 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a href="#" rel="imgtip[21] ">Aaron Woller </a></span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
SO </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
OF </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
6'0 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
170 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
R/R </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
St. Joseph, IL </span></td>

</tr><tr style="border:1; border-bottom:1px;">
<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
15 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
<a href="#" rel="imgtip[13] ">Austin Calhoun </a></span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
SO </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
OF </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
6'1 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
170 </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
L/L </span></td>

<td class="style4" style="vertical-align: top; width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
Danville, IL </span></td>

</tr>
<tfoot>
<tr>
<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">#</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Name</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Class</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Position</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Height</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Weight</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">B/T</span></th>

<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Hometown</span>




Aucun commentaire:

Enregistrer un commentaire