ساخت جدول حرفه ای با جاوا اسکریپت ( sort ، صفحه بندی ، جستجو )
جدول حرفه ای جاوا اسکریپت – با استفاده از کتابخانه dataTables می توانیم یک جدول full functional داشته باشیم باشیم که قابلیت هایی همچون :
- sort ( صعودی و نزولی )
- جستجو
- محدودیت نمایش ردیف
- صفحه بندی
داشته باشیم .
دموی برنامه
فایل 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
});
});
لیست نظرات
سلام و سپاس از سایت خوب شما می خواستم بپرسم برای این پروژه ها از چه تمی برای ویژوال استیدو کد استفاده کردید این تم خیلی زیباست
سلام این تم خود افزونه وردپرس هست .