ساخت جدول حرفه ای با جاوا اسکریپت ( sort ، صفحه بندی ، جستجو )

ساخت جدول حرفه ای با جاوا اسکریپت ( sort ، صفحه بندی ، جستجو )

جدول حرفه ای جاوا اسکریپت – با استفاده از کتابخانه dataTables می توانیم یک جدول full functional داشته باشیم باشیم که قابلیت هایی همچون :

  1. sort ( صعودی و نزولی )
  2. جستجو
  3. محدودیت نمایش ردیف
  4. صفحه بندی

داشته باشیم .


دموی برنامه


فایل index.html

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/jquery.dataTables.min.css">
</head>

<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
        <table id="pro-table">
            <thead>
                <tr>
                    <th>آیدی</th>
                    <th>نام و نام خانوادگی</th>
                    <th>سن</th>
                    <th>موجودی ( تومان )</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>آرمان زرین</td>
                    <td>28</td>
                    <td>1450000</td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>سورنا فتحی</td>
                    <td>23</td>
                    <td>1698000</td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>مبینا محمدی</td>
                    <td>19</td>
                    <td>3200000</td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>آرتا شقایق</td>
                    <td>34</td>
                    <td>969000</td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>آرشاوین نظری</td>
                    <td>16</td>
                    <td>4896450</td>
                </tr>

                <tr>
                    <td>6</td>
                    <td>فاطمه علیپور</td>
                    <td>21</td>
                    <td>2123800</td>
                </tr>

                <tr>
                    <td>7</td>
                    <td>زهرا مرادی</td>
                    <td>32</td>
                    <td>1796000</td>
                </tr>

                <tr>
                    <td>8</td>
                    <td>پویا بیات</td>
                    <td>41</td>
                    <td>3800000</td>
                </tr>

                <tr>
                    <td>9</td>
                    <td>مژگان صدر</td>
                    <td>29</td>
                    <td>3300000</td>
                </tr>

                <tr>
                    <td>10</td>
                    <td>پارسا رضایی</td>
                    <td>22</td>
                    <td>5150000</td>
                </tr>

               

            </tbody>

        </table>
    </div>
    <script src="static/js/lib/jquery.min.js"></script>
    <script src="static/js/lib/jquery.dataTables.min.js"></script>
    <script src="static/js/app.js"></script>
</body>

</html>


اسکریپت app.js

$(document).ready(function() {
    $('#pro-table').DataTable({
        "language": {
            "lengthMenu": "نمایش _MENU_ رکورد هر صفحه",
            "zeroRecords": "متاسفانه موردی یافت نشد",
            "info": "صفحه _PAGE_ از _PAGES_",
            "infoEmpty": "موردی یافت نشد",
            "infoFiltered": "(فیلتر _MAX_ رکورد)",
            "search": "جستجو",
            "loadingRecords": "درحال بارگذاری",
            "processing": "در حال پردازش",
            "paginate": {
                "first": "ابتدا",
                "last": "انتها",
                "next": "بعدی",
                "previous": "قبلی"
            },
            "aria": {
                "sortAscending": ": حالت صعودی فعال",
                "sortDescending": ": حالت نزولی فعال"
            }
        },
        "pageLength": 5
    });
});


دانلود برنامه جدول پیشرفته جاوا اسکریپت

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859