اذهب إلى المحتوى
  • 0

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

Samir Boukheche

بواسطة Samir Boukheche

 مشاركة

السؤال

Samir Boukheche عضو نشيط

Samir Boukheche

نشر
نشر

من فضلكم لدي هدا الجدول كيف اخلي مثلا عدد الاسطر فيه تظهر 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

7 أجوبة على هذا السؤال

Recommended Posts

  • 0
Samir Boukheche عضو نشيط

Samir Boukheche

نشر
  • الكاتب
نشر
بتاريخ الآن قال محمد أبو عواد:

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

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


       <!--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
Mohamd Imran عضو نشيط

Mohamd Imran

نشر
نشر
بتاريخ 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
Samir Boukheche عضو نشيط

Samir Boukheche

نشر
  • الكاتب
نشر
بتاريخ 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
Mohamd Imran عضو نشيط

Mohamd Imran

نشر
نشر
بتاريخ 55 دقائق مضت قال Reda Boukheche:

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

 

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

tb.htm

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...