جداول افزونه توضیحات عنوان صفحه در اینجا می رود...
جدول داده ها
DataTables افزونه ای برای کتابخانه jQuery Javascript است. این یک ابزار بسیار انعطاف پذیر است که بر اساس پایه های پیشرفت تدریجی ساخته شده است ، و تمام این ویژگی های پیشرفته را به هر جدول HTML اضافه می کند.. لطفا مطالعه کنید اسناد رسمی آنلاین برای لیست کامل گزینه ها.
# | نام | موقعیت | دفتر | سن | تاریخ شروع | حقوق |
---|---|---|---|---|---|---|
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
1. | تایگر پیلسون | مدیریت سایت | شاهین دژ | 61 | 1399/04/25 | 320800 تومان |
2. | جعفر خان | مدیر | توکیو | 63 | 1399/07/25 | 170750 تومان |
3. | مجتبی شاهی | مهندس بازاریابی | سانفرانسیسکو | 66 | 1398/01/12 | 86000 تومان |
4. | ندریک نوت | توسعه دهنده | برنامه نویس | 22 | 1399/03/29 | 433060 تومان |
5. | آیمار | طراح | توکیو | 33 | 1399/11/28 | 162700 تومان |
6. | جاسنون برود | مترجم | نیویورک | 61 | 1399/12/02 | 372000 تومان |
7. | هریر مکروایر | مدیر فروش | تهران | 59 | 1399/08/06 | 137500 تومان |
8. | رونی کلمن | قالب ساز | ارومیه | 55 | 1399/10/14 | 327900 تومان |
<!-- required css -->
<link href="assets/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="assets/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" />
<link href="assets/plugins/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" />
<!-- required js -->
<script src="assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="assets/plugins/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="assets/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
<!-- html -->
<table id="datatableDefault" class="table text-nowrap">
...
</table>
<!-- script -->
<script>
$('#datatableDefault').DataTable({
dom: "<'row mb-3'<'col-sm-4'l><'col-sm-8 text-right'<'d-flex justify-content-end'fB>>>t<'d-flex align-items-center'<'mr-auto'i><'mb-0'p>>",
lengthMenu: [ 10, 20, 30, 40, 50 ],
responsive: true,
buttons: [
{ extend: 'print', className: 'btn btn-default' },
{ extend: 'csv', className: 'btn btn-default' }
]
});
</script>
جدول پایه
جدول بوت استرپ یک جدول گسترده برای ادغام با برخی از فریم ورک های CSS است که به طور گسترده مورد استفاده قرار می گیرد. (پشتیبانی از بوت استرپ ، UI معنایی ، Bulma ، طراحی مواد ، بنیاد). لطفا مطالعه کنید اسناد رسمی آنلاین برای لیست کامل گزینه ها.
شناسه آیتم | نام آیتم | قیمت آیتم |
---|---|---|
1 | آیتم 1 | 1 تومان |
2 | آیتم 2 | 2 تومان |
3 | آیتم 3 | 3 تومان |
4 | آیتم 4 | 4 تومان |
5 | آیتم 5 | 5 تومان |
6 | آیتم 6 | 6 تومان |
7 | آیتم 7 | 7 تومان |
8 | آیتم 8 | 8 تومان |
9 | آیتم 9 | 9 تومان |
10 | آیتم 10 | 10 تومان |
11 | آیتم 11 | 11 تومان |
12 | آیتم 12 | 12 تومان |
13 | آیتم 13 | 13 تومان |
14 | آیتم 14 | 14 تومان |
15 | آیتم 15 | 15 تومان |
16 | آیتم 16 | 16 تومان |
17 | آیتم 17 | 17 تومان |
18 | آیتم 18 | 18 تومان |
19 | آیتم 19 | 19 تومان |
20 | آیتم 20 | 20 تومان |
<!-- required css / js -->
<link href="assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>
<!-- html -->
<table class="table" data-toggle="table"
data-sort-class="table-active"
data-sortable="true"
data-search="true"
data-pagination="true"
data-show-refresh="true"
data-show-columns="true"
data-show-fullscreen="true"
data-height="460">
...
</table>