Datatables aSorting 未按正确的列排序

Question

我正在尝试获取名册页面以按加载的玩家编号排序。我插入 aaSorting 并告诉它对第一列（数字）进行排序，但它正在对第二列（名称）进行排序。有人可以告诉我我做错了什么吗？

<style type="text/css">table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " B4BE" }
</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: " B4BE" }
</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>

Answer 1

将以下内容添加到 header

<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: " B4BE" }
</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，现在它运行良好。

Answer 2

既然你说过，你正在使用 datatables 1.10.4，请仔细检查文档。

Old documentation | New documentation

如你所见，1.10的参数被重写了，是从1.9改过来的。您使用的是 1.10 版本的 DataTables 插件，但使用的是 1.9 版本的参数

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

Answer 3

状态保存设置

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

清除保存的订单设置

要清除旧设置，您可以从 localStorage 中手动删除该条目，或者单击 reset 按钮（如果显示）。

Datatables aSorting 未按正确的列排序

Datatables aaSorting is not sorting by the correct column

javascript

sorting

jquery

datatables