数据表 aa排序未按正确的列排序

Datatables aaSorting is not sorting by the correct column

本文关键字:排序 aa 数据表      更新时间:2023-09-26

我正在尝试获取一个名单页面以按加载的球员编号进行排序。我插入 aaSort 并告诉它对第一列(数字)进行排序,但它正在对第二列(名称)进行排序。有人可以告诉我我做错了什么吗?

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

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

旧文档 |新文档

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

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

在标题中添加了以下内容

<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,现在它运行良好。

状态保存设置

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

清除已保存的订单设置

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

)。