تنظیم عرض width ستون های جدول در پلاگین datatables.net

08:10:00 AM - 1402/04/30

با سلام و عرض وقت بخیر

ببخشید من از جدول در پروژه ام استفاده نمودم عرض جدول را در تگ <table> بر حسب درصد وارد نمودم و عرض ستون ها را همین طور مشخص کردم در جداولی که ستون های کم دارد مشکل ندارد منتها در مواردی که ستون ها جدول زیاد باشد عرض ستون ها آن گونه نمی شود که تعریف شده است . بجای % از px هم استفاده کردم که این هم مثل همان بوده. و جدولی بوجود آمد به عرضی بیش از عرض صفحه، که از ظاهر و خوانایی پروژه کاسته است.

قسمتی از کد هم به این صورت است.

<table id="tbltimesheet" class="table table-striped table-bordered dt-responsive nowrap" style="border-radius: 2px; box-shadow: 3px 3px 1px 0 #4b9d11; border-color: #43a10f; width:100% !important" dir="rtl">
        <thead style="background-color: #bdeea2; color: #2e6806; font-weight: bold; border: 1px groove #389007;">
      <tr style=" border: 1px groove #389007; color: #389007;font-size:12px;">
                
      <td style="width:10%; text-align: center; border: 1px solid #389007 "> تاریخ</td>
      <td style="width: 10%; text-align: center; border: 1px solid #389007 ">شیفت</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">نوع حضور</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">ورود</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">خروج</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تاخیر</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تعجیل</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">اضافه کار</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">ورود اولیه</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">خروج اولیه</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تعداد حضور</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007">عملیات </td>
      <td style="width: 50%; text-align: center; border: 1px solid #389007"> تاییدیه ها</td>
      </tr>
      </thead>

در ضمن از پلاگین datatables استفاده نمودم.

از پاسخگویی شما سپاس گزارم

ویرایش شده در جمعه ۳۰ تیر ۱۴۰۲ ساعت ۱۰:۵۷:۲۶

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 1103

پاسخ دهنده : fateme 11:05:00 AM - 1402/04/30

وقتی شما از پلاگین datatables.net استفاده می کنید برای تغییر اندازه ستون ها نمی تونید مثل حالت عادی کار کنید. برای تغییر اندازه ستون در پلاگین datatables لینک زیر رو مطالعه کنید:

datatables Columns width

به مثال زیر توجه کنید :

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

در مثال بالا عرض ستون اول (target:0) رو برابر 20% قرار دادیم.

ویرایش شده در جمعه ۳۰ تیر ۱۴۰۲ ساعت ۱۱:۰۵:۵۷

به این پاسخ امتیاز بدهید 2 نظر گزارش حذف ویرایش

2 نظر

ahmadikia : عالی بود بی نهایت از لطف و پاسخگویی شما سپاس گزارم

حذف امتیاز کاربر : 13 رتبه کاربر : 55 تاریخ ثبت : ۱۱:۵۲ ۱۴۰۲/۰۴/۳۰

ahmadikia : مجدد سپاس گزارم انجام شد منتها منو سرچ و صفحه بندی نمایش داده نمی شود البته اسکریپت را به این صورت نوشتم <script> $(document).ready(function () { $('#tbltimesheet').DataTable({ "language": { "url": "\\assets\\js\\scripts\\datatables\\fa.json" }, "columnDefs": [ { "width": "2%", "targets": 0 } { "width": "3%", "targets": 1 } { "width": "9%", "targets":8 } ] }); }); </script>

حذف امتیاز کاربر : 13 رتبه کاربر : 55 تاریخ ثبت : ۰۶:۲۴ ۱۴۰۲/۰۴/۳۰

پاسخ دهنده : saedbfd 01:47:00 PM - 1402/04/31

تغییر ستون در پلاگین datatables از طریق دستورات جاوااسکریپت قابل انجام هست. لینک زیر رو نگاه کنید یک مثال کامل رو برای تغییر اندازه ستون ها براتون قرار داده.

Assigned column width

با این حال براتون یک مثال خیلی ساده توسط ویژوال استودیو حاضر کردم و سورسش رو میذارم. شما فقط کافیه این پروژه رو Run کنید و مشاهده کنید خروجی رو. کدهای زیر رو دقت کنید.

<script>
        $(document).ready(function () {
            $('#example').DataTable({
                "columns": [
                    { "width": "20%" },
                    { "width": "10%" },
                    { "width": "40%" },
                    { "width": "25%" }, 
                    { "width": "5%" }
                ]
            });
        });
</script>

در مثال بالا یک datatable داریم با 5 تا ستون. توسط درصد مشخص کردیم هر ستون چقدر باید فضا اشغال کنه. خروجی مشابه زیر خواهد بود :

تغییر اندازه ستون در پلاگین datatables