شرح عمل الترتيب تصاعديا او تنازليا او الاقل سعر او الاكثر فى قائمة منسدلة برمجياً

السلام عليكم اخواني الافاضل قبل يوم كنت هنا اتسائل عن طريقة عمل الترتيب برمجياً ولكن لم اجد الاجابات التى تتناسب مع متطلبات السؤال

ولكن بعد البحث والتعديل والتجربة اكثر من مرة توصلت الى حل يناسب فدائما ما نجد فى بعض المواقع الخاصة بعرض الاخبار او المنتجات او الاعلان قائمة منسدلة

رتب حسب :

من الاقدم الى الاحدث

او من الاحدث للاقدم

او الاقل سعر

او الاكثر سعراً

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

والحقيقه اولا ارغب فى شكر الاخ الفاضل والعضو ahmedsaoud31

فهوا من حل لي لغز باقى العمل لانه كان يتضمن اكواد جافا سكربت والحقيقه لم اكن على علم بكيف اقوم بتفعيلها كما يجب وساعدنى الاخ بتبسيط الكود الخاصى  بالجافا وتطويرة للجي كويري وبالتالى وعلى اساسه قمت باستكمال العمل البرمجي والذى اعتبرة بسيط جدا لو نظرنا له لكن معظم المبتدئين يققفون امامه

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

اولا اخواني نعمل  حقل جديد من نوع  select كالتالي

<select name="sel">
<option value="new2old">من الاحدث للاقدم</option>
<option value="old2new">من الاقدم للاحدث</option>
</select>

نضع بداخله اختيارين كالتالي

ويمكن تغير اسم الحقل على حسب رغبه كل شخص مثل اذا كنت ستضع بالاستعلام الترتيب حسب التاريخ او الاحدث او الاقدم مع العلم انه يمكنك اضافة اكثر من اختيار على حسب حاجه مشروعك

الخطوة التالية

نعمل ديف وليكن مثلا باسم : productsList

كالتالي

<div id="productsList"></div>

بعد انشاء الخليه او الديف

ننشـاء بداخله خليتين والتى من خلالهم سيتم عرض الاستعلامات الخاصة بالاختيارات بالقائمة مثل من الاحدث الي الاقدم او من الاقدم الى الاحدث لكن ملحوظة يجب ان يكون Id الخليه او الحقه نفس اسم الحقل الخاص بالاختيار او  value مثلا ان كان هذا 1 يبقى هذا 1 المهم ان يكونو الاثنين بنفس الاسم

كالتالي

<div id="productsList">
    <div id="new2old"></div>
    <div id="old2new"></div>
</div>

نيجي الان للاستعلام الاول الخاص بالاختيار وهوا من الاحدث الى الاقدم والذى سوف نضعه بداخل هذه الخليه

new2old

كالتالي

<div id="new2old"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime DESC",$connect); ?></div>

اما الحقل الخاص من الاقدم الى الاحدث سنضعه بداخل الخليه الاخرى

old2new

كالتالي

<div id="old2new"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime asc",$connect); ?></div>

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

سيصبح الكود الخاص بالاستعلامين  كالتالى

<div id="productsList">
    <div id="new2old"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime DESC",$connect); ?></div>
    <div id="old2new"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime asc",$connect); ?></div>
</div>

ناتي الان الى كود الجي كويري وعلى اساسه تعمل هذة الخاصية

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    // دالة حدث تحميل الصفحة
    $(function(){
    
        // إخفاء جميع العناصر
        $('#productsList > div').hide();
        
        // إظهار العنصر الأول
        $('#productsList #new2old').show();
        
        // دالة حدث تغير قيمة القائمة
        $('select[name=sel]').change(function(){
            $('#productsList > div').hide();
            $('#productsList #'+$(this).val()).show(500);
        });
    });
</script>

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

يمكن اضافة اكثر من حقل وليس للامر علاقه بكود الجي كويري فهوا خاص باخفاء الخلايا الخاصة بالاستعلامات الاخرى فلا يعقل ان يتم عرض محتويات الخلايا كلها فى ان واحد مثلا

عن عرض الاستعلام الخاص بالاقدم للاحدث يخفى استعلام الاحدث للاقدم وهكذا

وهذا واضح فى كود الجي كويري هنا ان الديف الاساس الذى نريد عرضة دائما للزائر هوا هذا

 $('#productsList #new2old').show();

ويمكن ان يختلف فهنا الخليه الافتراضية هي الاحدث الى الاقدم يمكن ان تقوم بتغيرها على حسب رغبتك

فقط تغيير اسم الخليه

#new2old

واليكم الان الكود كامل للصفحة واعذروني انا اول مرة اشرح  شيئ لكن الحقيقه لانو انا دورت كثير وما حصلت طلبي فاكيد فى كثير مبرمجين مبتدئين يكونو بيدورو على شئ مماثل

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    // دالة حدث تحميل الصفحة
    $(function(){
    
        // إخفاء جميع العناصر
        $('#productsList > div').hide();
        
        // إظهار العنصر الأول
        $('#productsList #new2old').show();
        
        // دالة حدث تغير قيمة القائمة
        $('select[name=sel]').change(function(){
            $('#productsList > div').hide();
            $('#productsList #'+$(this).val()).show(500);
        });
    });
</script>



<form >
<select name="sel">
<option value="new2old">من الاحدث للاقدم</option>
<option value="old2new">من الاقدم للاحدث</option>                        
</select>       
</form>



<div id="productsList">
    <div id="new2old"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime DESC",$connect); ?></div>
    <div id="old2new"><?php $result = mysql_query("SELECT * FROM Name_tabel ORDER BY dtime asc",$connect); ?></div>
</div>