كيفاش trier table بإستعمال jquery


فهاد الدرس كيفاش trier table بإستعمال jquery غادي نشوفو كيفاش نرتبو البيانات لي عندنا فجدول البيانات لي عبارة عن ارقام ولي عبارة عن أسماء الدرس بسيط للمبتدئين.

نظرة سريعة بالفيديو

- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه sortTable من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php فincludes الملف header.php الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <style type="text/css">
        .click{
            cursor:pointer;
        }
    </style>
    <meta charset="UTF-8">
    <title>Sort Table</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Color Picker</a>
     <ul class="nav navbar-nav">
      <li class="active"><a href="index.php">Accueil <span class="sr-only"></span></a></li>
     </ul>
    </div>
</nav>
                            

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.

                                <script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
                            

- الملف script.php

هادا هو الملف لي غادي يكون فيه الكود لي غادي يمكن من ترتيب الجدول فل كل th عندي ملي كتكون فوقها la souris كنسترجع لclass ديالها باش نعرفها واش int ولا String وكنزيدلها لclass click منبعد يلا ضغط عليها المستخدم كنقلب على كل tr لي كاينين فالجدول باش نقارن بينهم وكنستعمل لfonction sort لي هي par defaut ديال javascript لي كاتخد جوج سطور وكاتقارنهم ويلا كان الحقل عندو لclass num كنحولو ل int ب value1 *= 1 من بعد يلا كان سطر صغر من سطر كنرجع -1 واحد يعني يكون تحت السطر لي كبر منو كان كبر كنرجع 1 يعني يجي من فوق لي صغر منو كانو متساويين كنرجع 0 يعني يبقاو فبلاصتهم الكود ديال الملف هو :

                                $(document).ready(function(){
    $("th").each(function(column){
        $(this).hover(function(){
            $(this).data("type",$(this).attr("class"));
            $(this).addClass("click");
        },function(){
            $(this).removeClass("click");
        });
        $(this).click(function(){
            var type = $(this).data("type");
            var rows = $("table").find("tbody > tr");
            //sort default javascript function
            rows.sort(function(row1,row2){
                var value1 = $(row1).children("td").eq(column).text();
                var value2 = $(row2).children("td").eq(column).text();
                if(type == "num"){
                    //cast to integer
                    value1 *= 1;
                    value2 *= 1; 
                }
                return (value1 < value2) ? -1 : (value1 > value2 ? 1 : 0);
            });
            $.each(rows,function(index,row){
                $("tbody").append(row);
            });
        });
    });
});
                            

- الملف index.php

منبعد فالمجلد الرئيسي كنزيد ملف جديد index.php هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض جدول البيانات الكود ديالو هو :

                                    <?php include("includes/header.php");?>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <table class="table">
                        <thead>
                              <tr><th class="text">Nom</th><th class="text">Prénom</th><th class="num">Note</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>Samadi</td><td>Samir</td><td>18</td></tr>
                            <tr><td>Alami</td><td>Karim</td><td>15</td></tr>
                            <tr><td>Quati</td><td>Tamir</td><td>11</td></tr>
                            <tr><td>Baba</td><td>Zoubir</td><td>13</td></tr>
                            <tr><td>Naima</td><td>Naima</td><td>19</td></tr>
                            <tr><td>Kawtar</td><td>Kawtar</td><td>10</td></tr>
                            <tr><td>Samadi</td><td>Amine</td><td>4</td></tr>
                            <tr><td>Taki</td><td>Redouane</td><td>8</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<?php include("includes/footer.php");?>
                                


بحث في الموقع


إشترك للتوصل بالجديد