javascript - 单击一个按钮对 jQuery 中的表格进行排序

Question

我有一个很好用的分页，但我需要在表格前添加按钮，以便它可以按“id”、“name”等进行排序。所以一个按钮用于 ID，一个按钮用于名称!

我在 index.php 中的 jQuery 中有这段代码，因此您可以在页面之间快速浏览..

 <script type="text/javascript">
$(document).ready(function(){
    function loading_show(){
        $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
    }
    function loading_hide(){
        $('#loading').fadeOut('fast');
    }                
    function loadData(page){
        loading_show();                    
        $.ajax
        ({
            type: "POST",
            url: "load_data.php",
            data: "page="+page,
            success: function(msg)
            {
                $("#containers").ajaxComplete(function(event, request, settings)
                {
                    loading_hide();
                    $("#containers").html(msg);
                });
            }
        });
    }
    loadData(1);  // For first time page load default results
    $('#containers .pagination li.active').live('click',function(){
        var page = $(this).attr('p');
        loadData(page);

    });           
    $('#go_btn').live('click',function(){
        var page = parseInt($('.goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if(page != 0 && page <= no_of_pages){
            loadData(page);
        }else{
            alert('Skriv ett nummer mellan 1 och '+no_of_pages);
            $('.goto').val("").focus();
            return false;
        }

    });


});

load_data.php - 从 mysql 获取数据的 php

    <?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include "config.php";

$query_pag_data = "SELECT id,name from th_list ORDER BY id DESC LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";

echo '<table border="0" cellspacing="0">
    <tr id="head"><th width="30">Kategori</th><th>Genre</th><th>Namn</th><th><img src="https://cdn1.iconfinder.com/data/icons/Sizicons/16x16/download.png"></th><th>Klick</th><th>Kommenterarer</th></tr>
';
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['name']);
    $msg .= "<tr><td># 1</td><td>Drama</td><td>" . $htmlmsg . "</td><td><img src='https://cdn1.iconfinder.com/data/icons/diagona/icon/16/095.png'></td><td>2</td><td>3</td></tr>";

}
$msg = "<div class='data'><ul>" . $msg . "</ul></div></table><br />"; // Content for Data


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM th_list";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>Första</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>Första</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Föregående</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Föregående</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Nästa</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Nästa</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Sista</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Sista</li>";
}
$goto = "<div style='float: right;'><input type='text' class='goto' style=' float: left; margin-left: 10px; width: 30px; height: 8px; '/><input type='submit' id='go_btn' style='width: 40px; padding: 0; margin-left: 5px; float: left; margin-top: 0px;height: 27px;' value='Gå'/></div>";
$total_string = "<span class='total' a='$no_of_paginations'>Sida <b>" . $cur_page . "</b> av <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}
?>

然后在 index.php 上我写了这个，加载所有数据..

 <div id="loading"></div>
    <div id="containers">
        <div class="data"></div>
        <div class="pagination"></div>
    </div>

如果你能帮助我就太好了! :)

Answer 1

这是一个演示，您可以尝试在 <th> 中添加 anchor 来完成此操作。元素使用 anchor 的 title 属性作为列名

echo '<table border="0" cellspacing="0">
<tr id="head">
<a href="javascript:void(0)" class="sorter" title="Kategori"><th width="30">Kategori</th></a>
<a href="javascript:void(0)"  class="sorter" title="Genre"><th>Genre</th></a>
<a href="javascript:void(0)" class="sorter"  title="Namn"><th>Namn</th></a>
<th><img src="https://cdn1.iconfinder.com/data/icons/Sizicons/16x16/download.png"></th>
<a href="javascript:void(0)" class="sorter"  title="Klick"><th>Klick</th></a>
<a href="javascript:void(0)" class="sorter"  title="Kommenterarer"><th>Kommenterarer</th></a>
</tr>
';

为类sorter 添加点击功能

$('.sorter').live('click',function(){
    var sorter = $(this).attr('title');

var page = $('#containers .pagination li.inactive:eq(0)').attr('p'); /* get current page no.*/
    loadData(page,sorter);

});

您的 loadData() 略有变化也将 sorter 传递给 load_data.php

data: "page="+page+"&sorter="+sorter,

现在在您的查询中获取排序器并按以下方式排序

if($_POST['sorter']=="Kategori" || empty($_POST['sorter'])){
$order_column='id'; /* add conditions for other $_POST['sorter'] values */ 
}
$query_pag_data = "SELECT id,name from th_list ORDER BY $order_column DESC LIMIT $start, $per_page";

Please don't use mysql* functions they are depreciated instead use prepared statements or atleast use mysqli*

希望它是有意义的，并且会让你想到像 ASC/DESC 那样进行排序