如何在不使用php中的插件的情况下在html表中实现排序
[英]how to implement sorting in html table without using plugin in php
问题描述
我想用搜索排序和分页对表进行编码。 所有这三个操作应相互连接。 我已经编写了用于搜索和分页的代码，但是我无法添加排序逻辑，因此任何人都可以指导一种简单的方法来执行此操作，这是我的代码
<?php
include 'dbconfig.php';
$records_per_page=10;
$name = "";
$email= "";
$queryCondition = "";
if(!empty($_POST["search"])) {
foreach($_POST["search"] as $k=>$v){
if(!empty($v)) {
$queryCases = array("name","email");
if(in_array($k,$queryCases)) {
if(!empty($queryCondition)) {
$queryCondition .= " AND ";
} else {
$queryCondition .= " WHERE ";
}
}
switch($k) {
case "name":
$name = $v;
$queryCondition .= "username LIKE '" . $v . "%'";
break;
case "email":
$email = $v;
$queryCondition .= "user_email LIKE '" . $v . "%'";
break;
}
}
}
}
//if(isset($_POST["order"]))
//{
// $order=$_POST["order"];
//
//}
// else{
// $order="user_id";
//}
//if(isset($_POST["by"])){
// $by=$_POST["by"];
//if($by=="asc" & !isset($_POST["page"])){
// $by="desc";
//
// }else if($by=="desc" & !isset($_POST["page"]))
// {
//
// $by="asc";
//
// }
// else
// {
// $by=$_POST["by"];
// }
//}
//else
//{
// $by="asc";
//}
$orderby = " ORDER BY $order $by";
$sql = "SELECT * FROM tbl_register " . $queryCondition;
$href = 'demo2.php';
$perPage = 10;
$page = 1;
if(isset($_POST['page'])){
$page = $_POST['page'];
}
$start = ($page-1)*$perPage;
if($start < 0) $start = 0;
$query = $sql . $orderby . " limit " . $start . "," . $perPage;
// $result = $db_handle->runQuery($query);
$result = mysql_query($query);
while($row=mysql_fetch_array($result)) {
$resultset[] = $row;
}
if(!empty($resultset)) {
$resultset["perpage"] = showperpage($sql, $perPage, $href,$order,$by);
}
?>
<html>
<head>
</head>
<body>
<div id="user-grid">
<form name="frmSearch" method="post" action="demo2.php">
<div class="search-box">
<p><input type="text" placeholder="Name" name="search[name]" class="demoInputBox" value="<?php echo $name; ?>" /><input type="text" placeholder="Email" name="search[email]" class="demoInputBox" value="<?php echo $email; ?>" /><input type="submit" name="go" class="btnSearch" value="Search"><input type="reset" class="btnSearch" value="Reset" onclick="window.location='demo2.php'"></p>
</div>
<table id="tbl">
<thead>
<tr>
<!-- <th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_id'>Id</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=username'>UserName</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_email'>Email</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_contact'>Phno.</a></th>-->
<th><input type="submit" name="id" value="user_no" class="btn-link"/></th>
<th><input type="submit" name="username" value="username" class="btn-link"/></th>
<th><input type="submit" name="user_email" value="user_email" class="btn-link"/></th>
<th><input type="submit" name="user_contact" value="user_contact" class="btn-link"/></th>
</tr>
</thead>
<tbody>
<?php
foreach($resultset as $k=>$v) {
if(is_numeric($k)) {
?>
<tr>
<td><?php echo $resultset[$k]["user_no"]; ?></td>
<td><?php echo $resultset[$k]["username"]; ?></td>
<td><?php echo $resultset[$k]["user_email"]; ?></td>
<td><?php echo $resultset[$k]["user_contact"]; ?></td>
</tr>
<?php
}
}
if(isset($resultset["perpage"])) {
?>
<tr>
<td colspan="6" align=right> <?php echo $resultset["perpage"]; ?></td>
</tr>
<?php } ?>
<tbody>
</table>
</form>
</div>
</body>
</html>
<?php
function perpage($count, $per_page = '10',$href) {
$output = '';
if(!isset($_POST["page"])) $_POST["page"] = 1;
if($per_page != 0)
$pages = ceil($count/$per_page);
if($pages>1) {
for($i=1; $i<=$pages; $i++) {
if($_POST["page"] == $i)
$output = $output . '<span id='.$i.' >'.$i.'</span> ';
else
$output = $output . '<input type="submit" name="page" value="' . $i . '" />';
//$output=$output.'<a href="demo2.php?page='.$i.'&by=$by&order=$order">' .$i. ' </a> ';
}
}
return $output;
}
function showperpage($sql, $per_page = 10, $href,$order,$by) {
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$perpage = perpage($count, $per_page,$href);
return $perpage;
}
?>
<style>
#tbl
{
width:500px;
border:1px solid #00a2d1;
margin-top:10px;
}
#tbl tr {
background: #fff
}
#tbl td{
border:1px solid #00a2d1
}
#tbl th
{
background: #00a2d1;
border:1px solid #fff
}
#frmSearch button[type="submit"]{
background-color:#00a2d1;
color:#fff
}
.btn-link{
border:none;
outline:none;
background:none;
cursor:pointer;
color:#0000EE;
padding:0;
text-decoration:underline;
font-family:inherit;
font-size:inherit;
}
</style>
我想如何在用户单击表头时添加排序逻辑，应该在asc n desc和每个表头之间切换。
2 个解决方案
解决方案1
0 2016-04-05 06:43:20
如果没有插件，则应使用自己的JavaScript。 我发现了这个小提琴 。 这可能有帮助
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};
解决方案2
-1 2016-04-05 07:11:16
检查数据表工作示例https://datatables.net/examples/basic_init/zero_configuration.html
下面显示的Javascript用于初始化此示例中显示的表：
------------- JavaScript -----------------------
$(document).ready(function() {
$('#example').DataTable();
} );
除了上面的代码之外，还加载了以下Javascript库文件以供本示例使用：
//code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
------------------- HTML ---------------------------
下面显示的HTML是原始HTML表格元素，之前已被DataTables增强：
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
</tbody>
</table>
------------- CSS -----------------------
加载以下CSS库文件以供本示例使用以提供表的样式：
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
希望这个能对您有所帮助
通过Struts填充表格时，如何实现HTML表格排序
[英]How do I implement HTML table sorting when table is populated via Struts
如何实现我在php中使用的simplepagination插件？
[英]How to implement the simplepagination plugin that i'm using with php?
如何使用JavaScript为动态html表引入分页和排序？
[英]how to introduce pagination and sorting for a dynamic html table using javascript?
如何在单击按钮时在 excel 表中下载 html 表（不使用 php）
[英]How to download a html table in excel sheet on button click (without using php)
如何使用 PHP 在我的页面上填充我的 HTML 表而不破坏我的 JavaScript？
[英]How would I populate my HTML table on my page using PHP without breaking my JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.