数据值排序表

Question

我正在处理一个表，在该表中，我希望对数据中的值进行排序-val，而不是td的内容。我的问题是数字，从95到200不等。目前，这一数字比100和200还高出95。我现在正在使用的一项工作是在2位数字的基础上添加0，但它看起来很奇怪，可能会使用户感到困惑。

排序的工作代码如下：

jQuery(document).ready(function($){
    $("th").on("click", function() {
        var clicked = $(this).attr('id');
    
        var table = $('#mytable');
        var tbody = $('#mytbody');
        
        tbody.find('tr').sort(function(a, b) {
            if($('#'+clicked+'i').val()=='asc') {
                return $(b).find('.'+clicked).text().localeCompare($(a).find('.'+clicked).text());
            } else { 
                return $(a).find('.'+clicked).text().localeCompare($(b).find('.'+clicked).text());
            } 
        }).appendTo(tbody); 
        var sort_order=$('#'+clicked+'i').val(); 
        if(sort_order=="desc") { 
            document.getElementById(clicked+'i').value="asc";
            $('th').removeClass('asc', 'desc');
            $('#'+clicked).addClass('asc');
            $('#'+clicked).removeClass('desc');
        } 
        if(sort_order=="asc") { 
            document.getElementById(clicked+'i').value="desc";
            $('th').removeClass('asc desc');
            $('#'+clicked).addClass('desc');
            $('#'+clicked).removeClass('asc');
        }
    })
});

在表下面，我得到了隐藏的输入，它存储每个单击的th的当前排序顺序。

<div class="lej-table-info-table">
    <table name="mytable" id="mytable">
        <thead>
            <th id="t1">Adresse</th>
            <th id="t2">Areal (m²)</th>
            <th id="t3">Værelser</th>
            <th id="t4">Pris</th>
            <th id="t5">Type</th>
            <th id="t6">Status</th>
        </thead>
        <tbody id="mytbody">
    <?php
    while ($query->have_posts())
    {
        $query->the_post();
        
        $status = strip_tags(get_the_term_list( $post->ID, 'status', '', ', ', '' ));
        $value = get_field( "kontantpris" );
        $val_format = number_format($value, 0,"",".");
        $areal = get_field( "areal" );
        $areal_format = ltrim($areal, '0');
        ?>
        
            <tr class="table-link" name="<?php global $post; echo $post->post_name; ?>">
                <td class="t1"><?php echo $navn = get_field( "navn"); ?></td>
                <td class="t2"><?php echo $areal_format ?></td>
                <td class="t3"><?php echo strip_tags(get_the_term_list( $post->ID, 'vaerelser', '', ', ', '' )); ?></td>
            <?php if ($status == 'ledig') { ?>
                <td class="t4 pris" data-val="<?php echo $value ?>"><?php echo $val_format ?></td>
            <?php } else { ?>
                <td>-</td>
            <?php } ?>
                
                <td class="t5"><?php echo strip_tags(get_the_term_list( $post->ID, 'lejlighedstype', '', ', ', '' )); ?></td>
                <td class="t6 <?php echo $status ?>" style="text-transform: capitalize"><?php echo $status ?></td>
            </tr>

        <?php
    }
    ?>
    </tbody>
    </table>
        <input type="hidden" id="t1i" value="asc">
        <input type="hidden" id="t2i" value="asc">
        <input type="hidden" id="t3i" value="asc">
        <input type="hidden" id="t4i" value="asc">
        <input type="hidden" id="t5i" value="asc">
        <input type="hidden" id="t6i" value="asc">
    </div>

谢谢您的意见！

Answer 1

更清晰的HTML和WP

<div class="lej-table-info-table">
    <table name="mytable" id="mytable">
        <thead>
            <tr>
                <th id="t1">Adresse</th>
                <th id="t2">Areal (m²)</th>
                <th id="t3">Værelser</th>
                <th id="t4">Pris</th>
                <th id="t5">Type</th>
                <th id="t6">Status</th>
            </tr>
        </thead>
        <tbody id="mytbody">
            <?php
            while ($query->have_posts()) {
                $query->the_post();
                global $post;

                $tax_status = wp_get_post_terms($post->ID, 'status', ['fields' => 'names']);
                $tax_vaerelser = wp_get_post_terms($post->ID, 'vaerelser', ['fields' => 'names']);
                $tax_lej = wp_get_post_terms($post->ID, 'lejlighedstype', ['fields' => 'names']);

                $status = implode(', ', $tax_status);

                $value = get_field("kontantpris");
                $val_format = number_format($value, 0, "", ".");
                $areal = get_field("areal");
                $areal_format = ltrim($areal, '0');
            ?>

                <tr class="table-row table-link" name="<?php echo $post->post_name; ?>">
                    <td class="t1"><?php echo get_field("navn"); ?></td>
                    <td class="t2" data-numeric><?php echo $areal_format ?></td>
                    <td class="t3"><?php echo implode(', ', $tax_vaerelser); ?></td>
                    <?php if (in_array('ledig', $tax_status)) { ?>
                        <td class="t4 pris" data-numeric data-val="<?php echo str_replace('.', '', get_field('kontantpris')); ?>"><?php echo $val_format ?></td>
                    <?php } else { ?>
                        <td>-</td>
                    <?php } ?>

                    <td class="t5"><?php echo implode(', ', $tax_lej); ?></td>
                    <td class="t6 <?php echo $status ?>" style="text-transform: capitalize"><?php echo $status ?></td>
                </tr>

            <?php
            }
            ?>
        </tbody>
    </table>
</div>

JS -不需要额外的输入

jQuery(document).ready(function($) {
  const $table = $('#mytable');
  const $tbody = $table.find('tbody');

  $("th").on("click", function() {
    const $heading = $(this),
      columnIdx = $heading.index();

    const order = $(this).data('order') || 'asc', // asc by default
      newOrder = order == 'asc' ? 'desc' : 'asc';

    $table.find('tr.table-row').sort(function(a, b) {
      const $a = $(a).find('td').eq(columnIdx),
        $b = $(b).find('td').eq(columnIdx);

      if ($a.is('[data-numeric]')) {
        return (parseFloat($a.text()) - parseFloat($b.text())) * (order == 'asc' ? 1 : -1) > 0 ? 1 : -1;
      } else
        return $b.text().localeCompare($a.text()) * (order == 'asc' ? 1 : -1);
    }).appendTo($tbody);

    $heading.siblings().addBack().removeClass('asc desc');
    $heading.data('order', newOrder).addClass(newOrder);
  })
});

小提琴例子