数据表aaSorting没有按正确的列排序

时间:2015-01-28 17:36:23

标签: javascript jquery sorting datatables

我正在尝试获取一个名单页面按玩家编号onload排序。我插入了aaSorting并告诉它对第一列(数字)进行排序,但它正在对第二列(名称)进行排序。有人可以告诉我我做错了吗?

<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>

页面输出

<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>

3 个答案:

答案 0 :(得分:1)

既然你说过,你正在使用数据表1.10.4,请仔细检查文档。

Old documentation | New documentation

如您所见,1.10参数被重写并从1.9更改。您正在使用1.10版本的DataTables插件,但使用1.9版本参数

$(document).ready(function() {
    $('#roster').dataTable({
        'order': [[ 0, 'asc' ]]
    });
});

答案 1 :(得分:0)

在标题

中添加了以下内容
<link href="/jscript/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="/jscript/jquery.dataTables.js"></script>

<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 () {
  var coluna = $('#roster thead th.sorting_col').index('#roster thead th');
  var ordem  = $('#roster thead th.sorting_col').attr('data-sort');
  if(coluna == -1){coluna = 0;ordem  = 'asc';}
  $('#roster').DataTable({
    "paging":   false,
    "aaSorting": [[coluna,ordem,'number']]
  });
});</script>

调整了一下javascript,现在它运行得很好。

答案 2 :(得分:0)

状态保存设置

需要注意的一件事是stateSave设置。如果是这样,则订单将保存到localStorage。因此,即使您更改了javascript,重新加载页面也会用旧的替换新的order

清除已保存的订单设置

要清除旧设置,可以从localStorage手动删除条目,或单击reset按钮(如果显示)。