Javascript 单击按钮对jQuery中的表进行排序

我有一个很好的分页功能，但我需要在表前添加按钮，以便它可以按“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;
        }

    });


});

$（文档）.ready（函数（）{
函数加载_show（）{
$（'#load'）.html（“”.fadeIn（'fast'）；
}
函数加载_hide（）{
$（'加载'）.fadeOut（'快速'）；
}                
函数加载数据（第页）{
加载_show（）；
$.ajax
({
类型：“POST”，
url:“load_data.php”，
数据：“第页=”+第页，
成功：功能（msg）
{
$（“#容器”）.ajaxComplete（函数（事件、请求、设置）
{
加载_hide（）；
$（“#containers”）.html（msg）；
});
}
});
}
loadData（1）；//第一次页面加载默认结果
$（'#containers.pagination li.active'）.live（'click'，function（）{
var page=$（this.attr（'p'）；
装载数据（第页）；
});           
$（'gobtn'）.live（'click'，function（）{
var page=parseInt（$（'.goto'）.val（））；
var no_of_pages=parseInt（$（'.total'）.attr（'a'）；
如果（page！=0&&page这里有一个演示如何实现这一点，请尝试在
元素中添加锚点，使用锚点的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>
';

您的
loadData（）
中有细微变化，请将分类器也传递到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";

请不要使用mysql*函数，因为它们会被折旧，请使用
准备好的语句或至少使用mysqli*

希望它是有意义的，并能给你一个想法，让你在像ASC/DESC这样的排序上领先一步。在你的页面中放置一个链接，这样就可以使用ajax调用来完成：

<a href="javascript:void(0);" onclick="sortby_id()" >SORT BY ID </a>

如果你喜欢使用ajax，你可以选择上面的方法。这不会使页面重新加载。
如果您不想使用ajax或任何javascript，请使用下面的命令
生成您与变量的链接：

<a href="yourpage.php?page=2&sortby=id">SORT BY ID</a> // this will reload your page with page number two and variable will pass via url to handle it in your php file.

//这将使用第二页重新加载页面，变量将通过url在php文件中进行处理。

希望这有帮助
我建议您不要介意使用插件：
这里的问题是什么？您需要什么帮助？我想要一个写着“ID”的按钮。Like=Sort by[ID]，当您单击按钮时……它会自动按ID排序，效果/方式与我在分页中单击第2页时相同：）抱歉，如果我不清楚..嗨！谢谢你的时间：）但是当我更改数据：“page=“+page，改为data:“page=“+page+”&sorter=“+sorter，整个表都消失了：（@Johan试试这个
数据：{page:page，sorter:sorter}，
对不起。我的错。我更改了这个；function loadData（page）{改为function loadData（page，sorter）{.@Johan读了这个调试您的ajax调用并告诉我您遇到了什么错误我不确定我在哪里发现了错误..但它说：表单数据：page=1&sorter=Kategori..所以看起来它是对的？是的..但实际上我需要一个按钮来排序我的表，而不是单击表标题...）
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";

<a href="javascript:void(0);" onclick="sortby_id()" >SORT BY ID </a>

function sortby_id() {
    $.ajax({
                type:"POST",
                //data:"",
                url:"http://www.yourdomain.com/yourpage.php?page=2",// you can use more variable, just pass it to the url here
                success: function(data){
                    //write into div when successful handling


                }, //end of success
                error: function(){
                    // give your message when there is en error.
                    }// end of error

            });
}// end of function

<a href="yourpage.php?page=2&sortby=id">SORT BY ID</a> // this will reload your page with page number two and variable will pass via url to handle it in your php file.