• 0

استفسار عن كيفية عمل pagination لـ DataTables في Bootstrap

من فضلكم لدي هدا الجدول كيف اخلي مثلا عدد الاسطر فيه تظهر 10 وفوق 10 ينتقل للصفحة التانيةعبر الازرار تحت الجدول  1>2>3>4>5>6>7>8>9.....الخ

 

   <!--Grid Form-->

                    <div class="flex flex-1  flex-col md:flex-row lg:flex-row mx-2">
                        <div class="mb-2 border-solid border-gray-300 rounded border shadow-sm w-full">
                            <div class="bg-gray-200 px-2 py-3 border-solid border-gray-200 border-b">
                                Full Table
                            </div>
                            <div class="p-3">
                                <table class="table-responsive w-full rounded">
                                    <thead>
                                      <tr>
                                        <th class="border w-1/9 px-4 py-2">#</th>
                                        <th class="border w-1/9 px-4 py-2">رقم الطلب</th>
                                        <th class="border w-1/6 px-4 py-2">نوع الشحن</th>
                                        <th class="border w-1/6 px-4 py-2">قيمة الشحن</th>
                                        <th class="border w-1/6 px-4 py-2">رقم id اللاعب</th>
                                        <th class="border w-1/6 px-4 py-2">اسم اللاعب</th>
                                        <th class="border w-1/6 px-4 py-2">التوقيت</th>
                                        <th class="border w-1/7 px-4 py-2">الحالة</th>
                                        <th class="border w-1/6 px-4 py-2">شكوى</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border px-1 py-2">1</td>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 py-2">MS</td>
                                            <td class="border px-4 py-2">900 $</td>
                                            <td class="border px-4 py-2">132467976</td>
                                            <td class="border px-4 py-2">RAIDOO</td>
                                            <td class="border px-4 py-2">14-08-2021</td>
                                            <td class="border px-4 py-2">
                                                <i class="fas fa-check text-green-500 mx-2"></i>
                                            </td>
                                            <td class="border px-4 py-2">
                                                <a class="bg-teal-300 cursor-pointer rounded p-1 mx-1 text-white">
                                                        <i class="fas fa-eye"></i></a>
                                                <a class="bg-teal-300 cursor-pointer rounded p-1 mx-1 text-white">
                                                        <i class="fas fa-edit"></i></a>
                                                <a class="bg-teal-300 cursor-pointer rounded p-1 mx-1 text-red-500">
                                                        <i class="fas fa-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                       
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--/Grid Form-->

 

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

ما لغة البرمجة التي تستخدمها؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 1 دقيقة مضت قال محمد أبو عواد:

ما لغة البرمجة التي تستخدمها؟

اريد اضافته في داش بورد وفي اماكن الكتابة راح تكون php

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال Reda Boukheche:

اريد اضافته في داش بورد وفي اماكن الكتابة راح تكون php

هل تستخدم اطار عمل لارافيل؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال محمد أبو عواد:

هل تستخدم اطار عمل لارافيل؟

لا مجرد جدول قمت بنسخه فقط لا استعمل الاطار


       <!--Grid Form-->
    

                  

                    <div class="flex flex-1  flex-col md:flex-row lg:flex-row mx-2">
                        <div class="mb-2 border-solid border-gray-300 rounded border shadow-sm w-full">
                            <div class="bg-gray-200 px-2 py-3 border-solid border-gray-200 border-b">
                                Full Table
                            </div>
                            <div class="p-3">
                                <table class="table-responsive w-full rounded">
                                    <thead>
                                      <tr>
                                        <th class="border w-1/9 px-4 py-2">#</th>
                                        <th class="border w-1/9 px-4 py-2">رقم الطلب</th>
                                        <th class="border w-1/6 px-4 py-2">نوع الشحن</th>
                                        <th class="border w-1/6 px-4 py-2">قيمة الشحن</th>
                                        <th class="border w-1/6 px-4 py-2">رقم id اللاعب</th>
                                        <th class="border w-1/6 px-4 py-2">اسم اللاعب</th>
                                        <th class="border w-1/6 px-4 py-2">التوقيت</th>
                                        <th class="border w-1/7 px-4 py-2">الحالة</th>
                                        <th class="border w-1/9 px-4 py-2">شكوى</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                                                          <?php
                                                    error_reporting(0);
                                                    $count = 0;
                                                    $query = "SELECT * FROM `ordermag`  where ordercase = '1' and typecharge ='freefire' and user_id = '$userid' order by id desc";
                                                    $result = mysqli_query($conn, $query);
                                                    $output = '
 ';

                                                    if (mysqli_num_rows($result) > 0) {
                                                        while ($row = mysqli_fetch_array($result)) {
                                                            $card_no = $row['card_no'];

                                                            $count++;
                                                    ?>

                                        <tr>
                                            <td class="border px-1 py-2"><?php echo $count; ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['id']; ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['typecharge']; ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['amount']  ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['playerid']; ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['playername']  ?></td>
                                            <td class="border px-4 py-2"><?php echo $row['creat_at']; ?></td>
                                            <td class="border px-4 py-2">
                                                <i class="fas fa-check text-green-500 mx-2"></i>
                                            </td>
                                            <td class="border px-4 py-2">
                                              <button class="btn " data-order="<?php echo $row['id']  ?>" data-toggle="modal" data-target="#modaldemo7"><i class="fa fa-exclamation-triangle fa-lg text-yellow"></i> </button>
                                           
                                            </td>
                                        </tr>
                                       
                                    </tbody>
                                                <?php
                                                        }
                                                    }
                                                    ?>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--/Grid Form-->
    

 

بتاريخ 4 دقائق مضت قال محمد أبو عواد:

هل تستخدم اطار عمل لارافيل؟

اريد مثل ماهي في الموقع ده لاكن ماتضبط معي ماعرفت طريقة التركيب 

https://datatables.net/extensions/responsive/examples/styling/bootstrap4.html

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 2 ساعات قال Reda Boukheche:

اريد مثل ماهي في الموقع ده لاكن ماتضبط معي ماعرفت طريقة التركيب 

 

@Reda Boukheche

ما تقصده بالتنقل إلى صفحة أخرى يسمى pagination  في بوتستراب والأن سبب عدم ظهوره الجدول كما في الرابط هو يبدو إنك لم تقم بإستيراد مكتبة بوتستراب و إضافاته مثل إضافة datatables وكذلك الjquery الأن لحل المشكلة يجب أن نقوم بإستيراد ما ذكر بالترتيب في وسم ال head 

هكذا 

<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">

      <script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script>
      <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>

ثم نقوم في وسم ال body بوضع الجداول سأضعها كما في المثال 

  <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
            <tr>
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
                <td>4804</td>
                <td>b.williamson@datatables.net</td>
            </tr>
            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>h.chandler@datatables.net</td>
            </tr>
            <tr>
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>r.davidson@datatables.net</td>
            </tr>
            <tr>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
                <td>2360</td>
                <td>c.hurst@datatables.net</td>
            </tr>

            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>h.chandler@datatables.net</td>
            </tr>
            <tr>
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>r.davidson@datatables.net</td>
            </tr>
            <tr>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
                <td>2360</td>
                <td>c.hurst@datatables.net</td>
            </tr>
        </tbody>
    </table>

ثم نقوم بوضع كود الjquery الذي سيقوم بتفعيل او عمل initialise  للجدول 

<script type="text/javascript">
    $(document).ready(function() {
      $('#example').DataTable();
      } );
    </script>

بعد ذلك سيعمل كما في المثال  يمكنك الإطلاع على الكود أعلاه يعمل من هنا 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 52 دقائق مضت قال Mohamd Imran:

مرحباً @Reda Boukheche

ما تقصده بالتنقل إلى صفحة أخرى يسمى pagination  في بوتستراب والأن سبب عدم ظهوره الجدول كما في الرابط هو يبدو إنك لم تقم بإستيراد مكتبة بوتستراب و إضافاته مثل إضافة datatables وكذلك الjquery الأن لحل المشكلة يجب أن نقوم بإستيراد ما ذكر بالترتيب في وسم ال head 

هكذا 


<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">

      <script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script>
      <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
      <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>

ثم نقوم في وسم ال body بوضع الجداول سأضعها كما في المثال 


  <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
            <tr>
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
                <td>4804</td>
                <td>b.williamson@datatables.net</td>
            </tr>
            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>h.chandler@datatables.net</td>
            </tr>
            <tr>
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>r.davidson@datatables.net</td>
            </tr>
            <tr>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
                <td>2360</td>
                <td>c.hurst@datatables.net</td>
            </tr>

            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>h.chandler@datatables.net</td>
            </tr>
            <tr>
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>r.davidson@datatables.net</td>
            </tr>
            <tr>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
                <td>2360</td>
                <td>c.hurst@datatables.net</td>
            </tr>
        </tbody>
    </table>

ثم نقوم بوضع كود الjquery الذي سيقوم بتفعيل او عمل initialise  للجدول 


<script type="text/javascript">
    $(document).ready(function() {
      $('#example').DataTable();
      } );
    </script>

بعد ذلك سيعمل كما في المثال  يمكنك الإطلاع على الكود أعلاه يعمل من هنا 

قمت بنفس العمل لاكن يحدث خلل في شكل الصفحة مثل الخط يصبح صغير جدا تقارب الكلمات 

يعني التنسيق يصبح مخرب باقي الصفحة 

هل بسبب تداخل 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 55 دقائق مضت قال Reda Boukheche:

قمت بنفس العمل لاكن يحدث خلل في شكل الصفحة مثل الخط يصبح صغير جدا تقارب الكلمات 

 

يبدو أنه مشكلة لديك  في إستيراد إصدار مكتبة خاطئة أو يوجد لديك وسم غير مغلق أو ما شابه , يرجى الإطلاع على الكود أعلاه يعمل سأرفق لك الكود مثل ما وضعته في إجابتي ستلاحظ أنه يعمل بدون مشاكل ,مرفق

tb.htm

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن