×

تثبيت الهيدر في جدول

استخدم البي اتش بي لطباعة جدول من خلال قراءة المعلومات في قاعدة البيانات كيف يمكن تثبيت الهيدر الخاص بالجدول وعمل scroll للمعلومات الموجودة في الجدول
Like Tree1معجبون
  • 1 أضيفت بواسطة ahmadz

صورة 'm7md91' الرمزية
71
قديمة 10 - 01 - 2017, 09:52
المشاركة 1
استخدم البي اتش بي لطباعة جدول من خلال قراءة المعلومات في قاعدة البيانات
كيف يمكن تثبيت الهيدر الخاص بالجدول وعمل scroll للمعلومات الموجودة في الجدول
بمعنى الهيدر ثابت والمعلومات تتحرك من خلال scroll rol داخل الجدول
كما يحصل في ملف الاكسل عندما نثبت الهيدر ونحرك المحتوى ويبقى الهيدر ثابت
هذا الكود
رمز PHP:
<table class='table table-bordered table-fixed-header '  id='alternatecolor'>
<thead>    
<tr>
<th style='background:#f7ac01;font-size:14px;'>Related Customer</th>
     <th style='background:#f7ac01;font-size:14px;'>Level of Priority</th>
     <th style='background:#f7ac01;font-size:14px;'>Credit</th>
     <th style='background:#f7ac01;font-size:14px;'>Category</th>
     <th style='background:#f7ac01;font-size:14px;'>Subcategory</th>
     <th style='background:#f7ac01;font-size:14px;'>Product Or Service</th>
     <th style='background:#f7ac01;font-size:14px;'>Company Name</th>
     <th style='background:#f7ac01;font-size:14px;'>Name contact person</th>
     <th style='background:#f7ac01;font-size:14px;'>Evaluation</th>
     <th style='background:#f7ac01;font-size:14px;'>Phone</th>
     <th style='background:#f7ac01;font-size:14px;'>Phone 2</th>
     <th style='background:#f7ac01;font-size:14px;'>Whatsapp</th>
     <th style='background:#f7ac01;font-size:14px;'>Mobile</th>
     <th style='background:#f7ac01;font-size:14px;'>Web</th>
     <th style='background:#f7ac01;font-size:14px;'>Email</th>
     <th style='background:#f7ac01;font-size:14px;'>Location</th>
     <th style='background:#f7ac01;font-size:14px;'>Comment</th>
     <th style='background:#f7ac01;font-size:14px;'>Edit</th>
</tr>
</thead>
    <tbody>
    <?php
    
while($res=mysqli_fetch_array($allsupplier_query)){
    
$id=$res['db_id'];
    
$RelatedCustome=$res['db_RelatedCustome'];
    
$LevelofPriority=$res['db_LevelofPriority'];
    
$credit=$res['db_credit'];    
    
$category=$res['db_Category'];
    
$subcategories=$res['db_Subcategories'];
    
$ProductOrService=$res['db_ProductOrService'];
    
$CompanyName=$res['db_CompanyName'];
    
$Namecontactperson=$res['db_Namecontactperson'];
    
$evaluation=$res['db_evaluation'];
    
$phone=$res['db_Phone'];
    
$phone2=$res['db_phone2'];
    
$whatsapp=$res['db_Phonewhatsapp'];
    
$mobile=$res['db_mobile'];
    
$web=$res['db_web'];
    
$email=$res['db_email'];
    
$location=$res['db_Location'];
    
$comment=$res['db_comment'];?>
<tr>
<td> <?php echo $RelatedCustome;?></td>
<td> <?php echo $LevelofPriority;?></td>
<td> <?php echo $credit;?> </td>       
<td> <?php echo $category;?> </td>
<td> <?php echo $subcategories;?> </td>
<td> <?php echo $ProductOrService;?> </td>
<td> <?php echo $CompanyName;?> </td>
<td> <?php echo $Namecontactperson;?></td>
<td> <?php for( $i=1;$i<=$evaluation;$i++){
        echo
"<img src='../img/star.png'>";
    }
?></td>
<td> <a href='tel:<?php echo $phone;?>'><?php echo $phone ;?></a> </td>
<td> <a href='tel:<?php echo $phone2;?>'><?php echo $phone2;?></a> </td>
<td> <a href='tel:<?php $whatsapp;?>'><?php echo $whatsapp;?></a> </td>
<td> <a href='tel:<?php echo $mobile;?>'><?php echo $mobile;?></a></td>
<td> <a href='http://<?php echo $web;?>'><?php echo $web;?></a></td>
<td> <a href='mailto:<?php echo $email;?>'><?php echo $email;?></a> </td>
<td> <?php echo $location?></td>
<td> <?php echo $comment?></td>
<td> <a href='editsupplier.php?id=$id'><img src='../img/edit.png'/></a> </td>
</tr>
 </tbody>        
            <?php }?></table>
أفضل إجابه - أضيفت بواسطة ahmadz
المشكلة ان الاعمد ة في thead لا تتطابق مع الاعمدة التي في tbody
بمعنى انها غير منظمة العنوان مع المحتوى الخاص به
قلتلك لازم تعدل كل واحد ليتطابق

عموما الحل الاسهل هو Jquery


اتوقع ملف الجي كويري لديك في الموقع لو ما عندك حمله وضعه في header

ضع هذا الكود

رمز Code:
<script>
    (function ($) {

        $.fn.makeTableScrollable = function (options) {
            return this.each(function () {
                var $table = $(this);

                var opt = {
                    // height of the table
                    height: "250px",
                    // right padding added to support the scrollbar
                    rightPadding: "10px",
                    // cssclass used for the wrapper div
                    cssClass: ""
                }
                $.extend(opt, options);

                var $thead = $table.find("thead");
                var $ths = $thead.find("th");
                var id = $table.attr("id");
                var cssClass = $table.attr("class");

                if (!id)
                    id = "_table_" + new Date().getMilliseconds().ToString();

                $table.width("+=" + opt.rightPadding);
                $table.css("border-width", 0);

                // add a column to all rows of the table
                var first = true;
                $table.find("tr").each(function () {
                    var row = $(this);
                    if (first) {
                        row.append($("<th>").width(opt.rightPadding));
                        first = false;
                    }
                    else
                        row.append($("<td>").width(opt.rightPadding));
                });

                // force full sizing on each of the th elemnts
                $ths.each(function () {
                    var $th = $(this);
                    $th.css("width", $th.width());
                });

                // Create the table wrapper div
                var $tblDiv = $("<div>").css({ position: "relative",
                    overflow: "hidden",
                    overflowY: "scroll"
                })
                    .addClass(opt.cssClass);
                var width = $table.width();
                $tblDiv.width(width).height(opt.height)
                    .attr("id", id + "_wrapper")
                    .css("border-top", "none");
                // Insert before $tblDiv
                $tblDiv.insertBefore($table);
                // then move the table into it
                $table.appendTo($tblDiv);

                // Clone the div for header
                var $hdDiv = $tblDiv.clone();
                $hdDiv.empty();
                var width = $table.width();
                $hdDiv.attr("style", "")
                    .css("border-bottom", "none")
                    .width(width)
                    .attr("id", id + "_wrapper_header");

                // create a copy of the table and remove all children
                var $newTable = $($table).clone();
                $newTable.empty()
                    .attr("id", $table.attr("id") + "_header");

                $thead.appendTo($newTable);
                $hdDiv.insertBefore($tblDiv);
                $newTable.appendTo($hdDiv);

                $table.css("border-width", 0);
            });
        }
    })(jQuery);

    $("#table").makeTableScrollable( { cssClass:"blackborder"} );
</script>

ضع
رمز Code:
 id="table"
في <table>


وان شاء الله راح يشتغل كما تحب

موفق
المشاهدات 434 | التعليقات 12
قديمة 10 - 01 - 2017, 10:06
المشاركة 2
Mobile-Sn.Net
:: عضو نشيط ::
تاريخ الإنضمام: 17 - 06 - 2007
رقم العضوية : 37954
الدولة : [email protected]
المشاركات: 331
8
قديمة 10 - 01 - 2017, 11:55
المشاركة 3
المبدع2008
:: عضو نشيط ::
تاريخ الإنضمام: 21 - 10 - 2008
رقم العضوية : 62240
المشاركات: 461
49
افتراضي رد : تثبيت الهيدر في جدول
https://codepen.io/tjvantoll/pen/JEKIu
CSS بدون JS
قديمة 10 - 01 - 2017, 23:24
المشاركة 4
ahmadz
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 02 - 2014
رقم العضوية : 232749
المشاركات: 371
51
افتراضي رد : تثبيت الهيدر في جدول
في tbody

حط هذا الكود هكذا

رمز Code:
 <tbody style="height: 300px !important;">
غير 300px لتحديد الطول الذي يناسبك

والافضل تحط class وتعطيه اسم وتعمل css بملف خارجي

موفق
قديمة 12 - 01 - 2017, 20:09
المشاركة 5
صورة 'Ehab Obaidat‎‏' الرمزية
Ehab Obaidat‎‏
.:: عضو متألق ::.
تاريخ الإنضمام: 19 - 02 - 2015
رقم العضوية : 263969
الدولة : Palestine - Jerusalem
المشاركات: 8,393
555
قديمة 13 - 01 - 2017, 08:05
المشاركة 6
صورة 'm7md91' الرمزية
m7md91
:: عضو نشيط ::
تاريخ الإنضمام: 01 - 02 - 2013
رقم العضوية : 183350
الدولة : لبنان
المشاركات: 767
71
افتراضي رد : تثبيت الهيدر في جدول
هل تم حل مشكلة الخاصة بك اخي الكريم ؟
كلا الجدول لدي كبير ولم تنجح معس الحلول السابقة
قديمة 13 - 01 - 2017, 20:11
المشاركة 7
ahmadz
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 02 - 2014
رقم العضوية : 232749
المشاركات: 371
51
افتراضي رد : تثبيت الهيدر في جدول
الان فهمت مشكلتك

الهدر يتحرك مع المحتوى هذه مشكله في css اتوقع بالاصدار الجديد راح تعالج ولكن هناك خدع بسيطه

وهذه واحده منها بدون استعمال jquery


اولا

ضع لل table

رمز Code:
    display: block;
    height: 300px;
    overflow-y: scroll;
من ثم thead

ضع فيه

رمز Code:
position: absolute;
    width: 100%;

الان كل ما عليك هو تعديل الشكل مثل جعل padding بين th في thead ليناسب طول المحتوى لان كل شي راح يتغيير وتعدل حجم الجدول

وراح يمشي كما تريد
---------------------------------

في طريقه اسهل وهو عمل 2 تيبل في بعض

رمز Code:
<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>col 1 heading</th>
            <th>col 2 heading</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:325px; height:48px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>
زي ما تشوف عمل table لل للهدر و table لل بودي

وهكذا يتحكم في body لتيبل كما يريد
موفق
التعديل الأخير كان بواسطة ahmadz; 13 - 01 - 2017 الساعة 20:55
قديمة 14 - 01 - 2017, 10:22
المشاركة 8
صورة 'm7md91' الرمزية
m7md91
:: عضو نشيط ::
تاريخ الإنضمام: 01 - 02 - 2013
رقم العضوية : 183350
الدولة : لبنان
المشاركات: 767
71
افتراضي رد : تثبيت الهيدر في جدول
الان فهمت مشكلتك

الهدر يتحرك مع المحتوى هذه مشكله في css اتوقع بالاصدار الجديد راح تعالج ولكن هناك خدع بسيطه

وهذه واحده منها بدون استعمال jquery


اولا

ضع لل table

رمز Code:
    display: block;
    height: 300px;
    overflow-y: scroll;
من ثم thead

ضع فيه

رمز Code:
position: absolute;
    width: 100%;

الان كل ما عليك هو تعديل الشكل مثل جعل padding بين th في thead ليناسب طول المحتوى لان كل شي راح يتغيير وتعدل حجم الجدول

وراح يمشي كما تريد
---------------------------------

في طريقه اسهل وهو عمل 2 تيبل في بعض

رمز Code:
<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>col 1 heading</th>
            <th>col 2 heading</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:325px; height:48px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>
زي ما تشوف عمل table لل للهدر و table لل بودي

وهكذا يتحكم في body لتيبل كما يريد
موفق
المشكلة ان الاعمد ة في thead لا تتطابق مع الاعمدة التي في tbody
بمعنى انها غير منظمة العنوان مع المحتوى الخاص به
قديمة 14 - 01 - 2017, 16:30
المشاركة 9
ahmadz
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 02 - 2014
رقم العضوية : 232749
المشاركات: 371
51
افتراضي رد : تثبيت الهيدر في جدول
المشكلة ان الاعمد ة في thead لا تتطابق مع الاعمدة التي في tbody
بمعنى انها غير منظمة العنوان مع المحتوى الخاص به
قلتلك لازم تعدل كل واحد ليتطابق

عموما الحل الاسهل هو Jquery


اتوقع ملف الجي كويري لديك في الموقع لو ما عندك حمله وضعه في header

ضع هذا الكود

رمز Code:
<script>
    (function ($) {

        $.fn.makeTableScrollable = function (options) {
            return this.each(function () {
                var $table = $(this);

                var opt = {
                    // height of the table
                    height: "250px",
                    // right padding added to support the scrollbar
                    rightPadding: "10px",
                    // cssclass used for the wrapper div
                    cssClass: ""
                }
                $.extend(opt, options);

                var $thead = $table.find("thead");
                var $ths = $thead.find("th");
                var id = $table.attr("id");
                var cssClass = $table.attr("class");

                if (!id)
                    id = "_table_" + new Date().getMilliseconds().ToString();

                $table.width("+=" + opt.rightPadding);
                $table.css("border-width", 0);

                // add a column to all rows of the table
                var first = true;
                $table.find("tr").each(function () {
                    var row = $(this);
                    if (first) {
                        row.append($("<th>").width(opt.rightPadding));
                        first = false;
                    }
                    else
                        row.append($("<td>").width(opt.rightPadding));
                });

                // force full sizing on each of the th elemnts
                $ths.each(function () {
                    var $th = $(this);
                    $th.css("width", $th.width());
                });

                // Create the table wrapper div
                var $tblDiv = $("<div>").css({ position: "relative",
                    overflow: "hidden",
                    overflowY: "scroll"
                })
                    .addClass(opt.cssClass);
                var width = $table.width();
                $tblDiv.width(width).height(opt.height)
                    .attr("id", id + "_wrapper")
                    .css("border-top", "none");
                // Insert before $tblDiv
                $tblDiv.insertBefore($table);
                // then move the table into it
                $table.appendTo($tblDiv);

                // Clone the div for header
                var $hdDiv = $tblDiv.clone();
                $hdDiv.empty();
                var width = $table.width();
                $hdDiv.attr("style", "")
                    .css("border-bottom", "none")
                    .width(width)
                    .attr("id", id + "_wrapper_header");

                // create a copy of the table and remove all children
                var $newTable = $($table).clone();
                $newTable.empty()
                    .attr("id", $table.attr("id") + "_header");

                $thead.appendTo($newTable);
                $hdDiv.insertBefore($tblDiv);
                $newTable.appendTo($hdDiv);

                $table.css("border-width", 0);
            });
        }
    })(jQuery);

    $("#table").makeTableScrollable( { cssClass:"blackborder"} );
</script>

ضع
رمز Code:
 id="table"
في <table>


وان شاء الله راح يشتغل كما تحب

موفق
Al-Kaiser معجب بهذا.
قديمة 16 - 01 - 2017, 10:37
المشاركة 10
صورة 'm7md91' الرمزية
m7md91
:: عضو نشيط ::
تاريخ الإنضمام: 01 - 02 - 2013
رقم العضوية : 183350
الدولة : لبنان
المشاركات: 767
71
افتراضي رد : تثبيت الهيدر في جدول
قلتلك لازم تعدل كل واحد ليتطابق

عموما الحل الاسهل هو Jquery


اتوقع ملف الجي كويري لديك في الموقع لو ما عندك حمله وضعه في header

ضع هذا الكود

رمز Code:
<script>
    (function ($) {

        $.fn.makeTableScrollable = function (options) {
            return this.each(function () {
                var $table = $(this);

                var opt = {
                    // height of the table
                    height: "250px",
                    // right padding added to support the scrollbar
                    rightPadding: "10px",
                    // cssclass used for the wrapper div
                    cssClass: ""
                }
                $.extend(opt, options);

                var $thead = $table.find("thead");
                var $ths = $thead.find("th");
                var id = $table.attr("id");
                var cssClass = $table.attr("class");

                if (!id)
                    id = "_table_" + new Date().getMilliseconds().ToString();

                $table.width("+=" + opt.rightPadding);
                $table.css("border-width", 0);

                // add a column to all rows of the table
                var first = true;
                $table.find("tr").each(function () {
                    var row = $(this);
                    if (first) {
                        row.append($("<th>").width(opt.rightPadding));
                        first = false;
                    }
                    else
                        row.append($("<td>").width(opt.rightPadding));
                });

                // force full sizing on each of the th elemnts
                $ths.each(function () {
                    var $th = $(this);
                    $th.css("width", $th.width());
                });

                // Create the table wrapper div
                var $tblDiv = $("<div>").css({ position: "relative",
                    overflow: "hidden",
                    overflowY: "scroll"
                })
                    .addClass(opt.cssClass);
                var width = $table.width();
                $tblDiv.width(width).height(opt.height)
                    .attr("id", id + "_wrapper")
                    .css("border-top", "none");
                // Insert before $tblDiv
                $tblDiv.insertBefore($table);
                // then move the table into it
                $table.appendTo($tblDiv);

                // Clone the div for header
                var $hdDiv = $tblDiv.clone();
                $hdDiv.empty();
                var width = $table.width();
                $hdDiv.attr("style", "")
                    .css("border-bottom", "none")
                    .width(width)
                    .attr("id", id + "_wrapper_header");

                // create a copy of the table and remove all children
                var $newTable = $($table).clone();
                $newTable.empty()
                    .attr("id", $table.attr("id") + "_header");

                $thead.appendTo($newTable);
                $hdDiv.insertBefore($tblDiv);
                $newTable.appendTo($hdDiv);

                $table.css("border-width", 0);
            });
        }
    })(jQuery);

    $("#table").makeTableScrollable( { cssClass:"blackborder"} );
</script>

ضع
رمز Code:
 id="table"
في <table>


وان شاء الله راح يشتغل كما تحب

موفق
ممكن رابط او ملف ال jquery
قديمة 16 - 01 - 2017, 15:00
المشاركة 11
ahmadz
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 02 - 2014
رقم العضوية : 232749
المشاركات: 371
51
افتراضي رد : تثبيت الهيدر في جدول
تفضل هذا احدث اصدار

https://code.jquery.com/jquery-3.1.1.min.js
قديمة 20 - 01 - 2017, 18:21
المشاركة 12
صورة 'Ehab Obaidat‎‏' الرمزية
Ehab Obaidat‎‏
.:: عضو متألق ::.
تاريخ الإنضمام: 19 - 02 - 2015
رقم العضوية : 263969
الدولة : Palestine - Jerusalem
المشاركات: 8,393
555
قديمة 25 - 01 - 2017, 10:31
المشاركة 13
صورة 'Ehab Obaidat‎‏' الرمزية
Ehab Obaidat‎‏
.:: عضو متألق ::.
تاريخ الإنضمام: 19 - 02 - 2015
رقم العضوية : 263969
الدولة : Palestine - Jerusalem
المشاركات: 8,393
555
 
مغلق
 
العلامات المرجعية

صفحه عرض اسعار العملات لحظه بلحظه يوجد مثال من افضل c# ام java

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 02:00.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2018
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.