Hello,

I am trying to create a table which has a sort feature. I mean whenever someone click the table header, the table content must be sorted based on the header. how to do so?

Here is my table codes:

index.php

<!-- Insert New -->

<br><br><br><br>                
<div id="inputberita">

      <p>&nbsp;</p>

  <p>&nbsp;</p><center>

<?php         

      include('../includes/koneksi.php');



        //Hapus berita // undefined index: mode



    if (!empty($_REQUEST['id']) && !empty($_REQUEST['mode']) && $_REQUEST['mode'] == "delete")
        {
        $id = $_REQUEST['id'];
        $result = mysql_query("DELETE FROM static_page WHERE id =".$id) or die(mysql_error());

        $confirmation = !$result ? "Gagal menghapus data." : "Data telah terhapus."; 
        }


?>
<div align="center">
    <div style="width:700px;text-align:left;padding-top:5px;">
        <?php  if (isset($confirmation)) { echo $confirmation; } ?>  
        <form method="get" action="<?php $_SERVER['PHP_SELF'] ?>">

                                    <br/>

                        <!--<button type="button" class="button" onClick="parent.location='input_berita_static.php'">Berita Static Baru</button><br><br> -->

        <?php
                //LOAD NEWS

                $result = mysql_query("SELECT * FROM static_page WHERE post_parent='0' ORDER BY post_id ASC") or die(mysql_error());
                ?>
                <table id="admintable" border="1" cellpadding="2" cellspacing="0">
                    <tr>
                        <th>Page</th><th>Post</th>
                    </tr>
                    <?php
                    $i=0;
                    while ($data = mysql_fetch_array($result)){
                    $result2=($i%2)?'#DFA09D':'white';


                            //echo "<tr bgcolor='$result2'>";                    
                            //echo '<td>'.$data['page'].'</td>';
                            //echo "<td><a href='post.php?post_id=".$data['post_ID']."'><img src='../images/post.jpg'></a></td>";
                            //echo '</tr>';                  

                            echo "<tr bgcolor='$result2'>";                  
                            echo '<td><a href="input_berita_static.php?post_id='.$data['post_id'].'">'.$data['page'].'</a></td>';
                            echo '<td>';

                            if($data['post_type']=="post"){                                         
                            echo '<a href="post.php?post_id='.$data['post_id'].'"><img src="../images/post.png"></a></td>';                                                 
                            }

                            echo '</tr>';

                    $i++;   
                    }
                    ?>
                </table>

        </form>
    </div>
</div>
  </center>
</div>  

                <!-- End Insert -->

Recommended Answers

All 9 Replies

Save yourself some grief and look online for a javascript library that has that functionality. tablesorter and sorttable are 2 that came up. I haven't either.
I have used tablesaw though but it includes other functionality that you may not need.

I suggest using DataTables to do this. Their zero configuration example does exactly what you want to an existing HTML table. It does also add search and a few things, so you may want to remove those extra features:

<!-- previous code the same -->
<table id="admintable" border="1" cellpadding="2" cellspacing="0">
<thead><!-- added -->
<tr>
    <th>Page</th><th>Post</th>
</tr>
</thead><!-- added -->
<tbody><!-- added -->
<?php
$i=0;
while ($data = mysql_fetch_array($result)){
$result2=($i%2)?'#DFA09D':'white';
        //echo "<tr bgcolor='$result2'>";                    
        //echo '<td>'.$data['page'].'</td>';
        //echo "<td><a href='post.php?post_id=".$data['post_ID']."'><img src='../images/post.jpg'></a></td>";
        //echo '</tr>';                  
        echo "<tr bgcolor='$result2'>";                  
        echo '<td><a href="input_berita_static.php?post_id='.$data['post_id'].'">'.$data['page'].'</a></td>';
        echo '<td>';
        if($data['post_type']=="post"){                                         
        echo '<a href="post.php?post_id='.$data['post_id'].'"><img src="../images/post.png"></a></td>';                                                 
        }
        echo '</tr>';
$i++;   
}
?>
</tbody>
</table><!-- added -->

<!---------------------- DataTables Begin ---------------------->
<!-- remove this line if you already have jquery -->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- include datatables library -->
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    $('#admintable').DataTable({
        "paging": false,
        "searching": false
    });
});
</script>
<!---------------------- DataTables End ---------------------->

<!-- all other code the same -->

DataTables can also use server-side data loading so that it only fetches enough data to display at one time. This is not needed unless you have many thousands or millions of records, however, so the above should get you very far.

Note that you must have <thead> and <tbody> tags or DataTables will not load properly! Normally these tags are optional and many people don't even know they exist, but DataTables requires them.

I try this! Yet, have not get it loaded correctly.

index.php

    <head>
    <link rel="stylesheet" href="jquery.dataTables.css" />
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#admintable1').DataTable();
} );
    </script>
    </head>


    <?php
                //LOAD NEWS

                $result = mysql_query("SELECT * FROM static_page WHERE post_parent='0' ORDER BY post_id ASC") or die(mysql_error());
                ?>  <!-- border="1" -->
                <table style="margin: -100px 0 0 -10px; position: relative;" id="admintable1" cellpadding="2" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Page</th><th>Post</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                    $i=0;
                    while ($data = mysql_fetch_array($result)){
                    $result2=($i%2)?'#f6f6f6':'white';


                            //echo "<tr bgcolor='$result2'>";                    
                            //echo '<td>'.$data['page'].'</td>';
                            //echo "<td><a href='post.php?post_id=".$data['post_ID']."'><img src='../images/post.jpg'></a></td>";
                            //echo '</tr>';                  

                            echo "<tr bgcolor='$result2'>";                  
                            echo '<td><a href="input_berita_static.php?post_id='.$data['post_id'].'">'.$data['page'].'</a></td>';
                            echo '<td>';

                            if($data['post_type']=="post"){                                         
                            echo '<a href="post.php?post_id='.$data['post_id'].'"><img src="../images/post.png"></a></td>';                                                 
                            }

                            echo '</tr>';

                    $i++;   
                    }
                    ?>
                </tbody> 
                </table>

I already copy the files to my localhost. I wonder what's wrong?

Try this. Plz change the order of JS files, to ...

    <script src="assets/js/jquery-1.11.1.min.js"></script>
   <script src="assets/js/jquery.dataTables.min.js"></script>   

It doesn't change anything.

Well... it has to change everything, because you can't call jquery.dataTables.min.js before calling jquery.js. If you have Developer Tools installed on your browser look at the Console tab and view if any errors appear.

I checked the Console Tab in Firebug. No errors appears. It just the sort feature does not work in the table.

Did you check the Network tab and make sure that there are no 30_ or 40_ errors?

Where to check the _30 or _40 errors?

NETWORK

HEADER

Connection  Keep-Alive
Content-Length  7397
Content-Type    text/html
Date    Mon, 03 Nov 2014 03:25:01 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.4.7 (Win32) OpenSSL/0.9.8y PHP/5.4.22
X-Powered-By    PHP/5.4.22
view source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Cookie  __utma=111872281.1630303730.1399954622.1412595512.1412598316.25; __utmz=111872281.1399954622.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); _ga=GA1.1.1630303730.1399954622
Host    localhost
Referer http://localhost/Admin-backend/template/access_level.php
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0

-------------------------------------------------

RESPONSES

    <!DOCTYPE html>
    <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
    <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
    <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
    <!-- BEGIN HEAD -->
    <head>
        <meta charset="UTF-8" />
        <title>Portal Admin Dashboard | Dashboard </title>
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
         <!--[if IE]>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <![endif]-->
        <!-- GLOBAL STYLES -->
        <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <link rel="stylesheet" href="assets/css/theme.css" />
        <link rel="stylesheet" href="assets/css/MoneAdmin.css" />
        <link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />
        <!--END GLOBAL STYLES -->

        <!-- PAGE LEVEL STYLES -->
        <link href="assets/css/layout2.css" rel="stylesheet" />
           <link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />
           <link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />
        <!-- END PAGE LEVEL  STYLES -->
         <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/js/jquery.dataTables.min.js"></script>    
        <link rel="stylesheet" href="jquery.dataTables.css" />
        <script>
        $(document).ready(function() {
        $('#admintable1').DataTable();
    } );
        </script>
    </head>

        <!-- END HEAD -->

        <!-- BEGIN BODY -->
    <body class="padTop53 " >

        <!-- MAIN WRAPPER -->
        <div id="wrap" >


            <!-- HEADER SECTION -->
            <div id="top">

                <nav class="navbar navbar-inverse navbar-fixed-top " style="padding-top: 10px;">
                    <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="#menu" id="menu-toggle">
                        <i class="icon-align-justify"></i>
                    </a>
                    <!-- LOGO SECTION -->
                    <header class="navbar-header">

                        <a href="index.html" class="navbar-brand">
                        <img src="assets/img/logo.png" alt="" />

                            </a>
                    </header>
                    <!-- END LOGO SECTION -->
                    <ul class="nav navbar-top-links navbar-right">






                    </ul>

                </nav>

            </div>
            <!-- END HEADER SECTION -->



            <!-- MENU SECTION -->
           <div id="left" >
                <div class="media user-media well-small"> <!--
                    <a class="user-link" href="#">
                        <img class="media-object img-thumbnail user-img" alt="User Picture" src="assets/img/user.gif" />
                    </a>
                    <br />
                    <!--<div class="media-body">
                        <h5 class="media-heading"> Joe Romlin</h5>
                        <ul class="list-unstyled user-info">

                            <li>
                                 <a class="btn btn-success btn-xs btn-circle" style="width: 10px;height: 12px;"></a> Online

                            </li>

                        </ul>
                    </div> -->
                    <br />
                </div>

                <ul id="menu" class="collapse">


                    <li class="panel active">
                        <a href="index.php" >
                            <i class="icon-table"></i> Dashboard


                        </a>                   
                    </li>



                    <li class="panel ">
                        <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">





    <li><a href="index.php"><i class="icon-film"></i> Pages </a></li>
    <li><a href="image_gallery.php"><i class="icon-table"></i> Image Gallery </a></li>
    <li><a href="access_level.php"><i class="icon-table"></i> Access Level ID </a></li>


                </ul>

            </div>
            <!--END MENU SECTION -->



            <!--PAGE CONTENT -->
            <div id="content">

                <div class="inner" style="min-height: 700px;">
                    <div class="row"> 
                        <div class="col-lg-12">
                            <h1> Access Level </h1>
                        </div>
                    </div>
                      <hr />

                    <!-- Insert New -->

    <div id="inputberita">

    <br><br>    

          <p> </p>

      <p> </p><center>


    <div align="center">
        <div style="width:700px;text-align:left;padding-top:5px;">

            <form method="get" action="">

                                        <br/>

                            <!-- <button type="button" onClick="parent.location='add_level.php'">Add Access Level ID</button><br><br> -->


                    <button type="button" onClick="parent.location='user.php'">Add Admin</button><br><br>

                    <h3>Super Admin:</h3><br>
                    <table id="admintable" border="1" cellpadding="2" cellspacing="0" width="700px">
                        <tr>
                            <th>Name</th><th>Username</th><th>Password</th><th>Access Level</th><th>Post</th>
                        </tr>
                        <tr bgcolor='white'><td><a href="user.php?admin_id=2">techsupport</a></td><td>techsupport</a></td><td>827ccb0eea8a706c4c34a16891f84e7b</a></td><td>admin</td><td><a href="access_level.php?admin_id=2" onClick="return confirm('Are you sure you want to delete this?')">Delete</a></td></tr><tr bgcolor='#f6f6f6'><td><a href="user.php?admin_id=3">custsupport</a></td><td>custsupport</a></td><td>827ccb0eea8a706c4c34a16891f84e7b</a></td><td>admin</td><td><a href="access_level.php?admin_id=3" onClick="return confirm('Are you sure you want to delete this?')">Delete</a></td></tr><tr bgcolor='white'><td><a href="user.php?admin_id=4">techsupport2</a></td><td>techsupport2</a></td><td>827ccb0eea8a706c4c34a16891f84e7b</a></td><td>admin</td><td><a href="access_level.php?admin_id=4" onClick="return confirm('Are you sure you want to delete this?')">Delete</a></td></tr><tr bgcolor='#f6f6f6'><td><a href="user.php?admin_id=7">custsupport2</a></td><td>custsupport2</a></td><td>827ccb0eea8a706c4c34a16891f84e7b</a></td><td>admin</td><td><a href="access_level.php?admin_id=7" onClick="return confirm('Are you sure you want to delete this?')">Delete</a></td></tr><tr bgcolor='white'><td><a href="user.php?admin_id=10">admin2</a></td><td>admin2</a></td><td>827ccb0eea8a706c4c34a16891f84e7b</a></td><td>admin</td><td><a href="access_level.php?admin_id=10" onClick="return confirm('Are you sure you want to delete this?')">Delete</a></td></tr>             </table><br><br>


                    Table 'portal.student' doesn't exist
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.