2013-11-26 47 views
1

排序表我有一个伟大的工程分页,但我需要的表前添加按钮,这样它可以通过“ID”,“姓名”,排序等.. 的ID,这样一个按钮和一个名字!点击一个按钮,在jQuery的

我在jQuery的这段代码在index.php文件,所以你可以在页面之间快速浏览..

<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 - PHP从MySQL得到的东西

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

将是巨大的,如果你能帮助我! :)

+0

什么在这里对这个问题吗?你有什么需要帮助的? – Justin

+0

我希望有一个按钮,上面写着“ID”。像=排序[ID],当你点击按钮..它会自动排序编号,在同样的效果/方式,当我在分页单击第2页! :) 对不起,如果我不清楚.. – Johan

回答

0

这里是一个演示了如何做到这一点尝试在<th>元素添加锚锚使用的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()通过分拣机到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

+0

嗨!谢谢你的时间:)但当我改变数据:“page =”+页面,数据:“page =”+页面+“&sorter =”+分类器, 整个表消失:( – Johan

+0

@Johan试试这个'数据:{page:page,sorter:sorter},' –

+0

对不起。我的错。我改了这个;函数loadData(page){函数loadData(page,sorter){。 – Johan

0

地方的链接在你的页面与AJAX调用这样做领先一步:

<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 

你的人上面,如果你喜欢使用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. 

希望这有助于