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

جلب بيانات من صفحة json ووضعها في جدول datatable

خالد ابو مهادي

السؤال

السلام عليكم 

لدي صفحة البحث وبها فورم البحث

 <form role="form" class="form-horizontal" method="post" name="search" action="search">
                    <div class="content-above">
                        <div class="col-md-11">
                            <?php echo validation_errors(); ?>
                        </div>
                        <div class="">
                            <div class="col-md-12">
                                <div class="col-md-4">
                                    <div class="form-group form-md-line-input">
                                        <label for="ID" class="control-label ">رقم العضو :</label>
                                        <input type="text" class="form-control customized" id="ID" name="ID"
                                               placeholder="رقم العضو">
                                    </div>
                                </div>

                                <div class="col-md-1"></div>

                                <div class="col-md-4">
                                    <div class="form-group form-md-line-input">
                                        <label class="control-label" for="FullName">اسم العضو</label>
                                        <input type="text" class="form-control customized" id="FullName" name="FullName"
                                               placeholder="اسم العضو">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="">
                            <div class="col-md-12">
                                <div class="col-md-4">
                                    <div class="form-group form-md-line-input">
                                        <label class="control-label " for="Mobile">رقم الهاتف:</label>
                                        <input type="text" class="form-control customized" id="Mobile" name="Mobile"
                                               placeholder="رقم الهاتف">
                                    </div>
                                </div>

                          
                            </div>
                        </div>


                    </div>


                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-10">

                                <button type="submit" class="btn btn-success  blue " id="btnSearch">
                                    <!-- onclick="return IsEmpty();"-->
                                    <i class='fa fa-search' aria-hidden='true'>&nbsp;&nbsp; </i> بحث
                                </button>


                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

وصفحة نتائج البحث تخرج البيانات JSON

مثل 

{"ID":1,"FULL_NAME":"علي علي","MOBILE":"123456"},{"ID":2,"FULL_NAME":"محمد محمد","MOBILE":"123789"},{"ID":6,"FULL_NAME":"علي علي","MOBILE":"456789"},{"ID":10,"FULL_NAME":"حسن حسن","MOBILE":"456123"}

 

اريد وضع بيانات ناتج البحث في جدول datatable داخل الديف 

<div id="searchResult"></div>

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

          $(document).ready(function () {

                $('#btnSearch').click(function () {

                  $.ajax({
                        type: "POST",
                        url: "<?php echo base_url('user/search');?>",
                        data: dataString,
                        success: function (data) {

                             var content = data;
                             console.log(data);
                             $("#searchResult").html(content);




                        }
                  });
                  
                    return false;

                });


            });
                  

انا استخدم فريم CodeIgniter

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

Recommended Posts

  • 1

وعليكم السلام ورحمة الله

اذا كنت نتيجة الـ JSON تأتي صحيحة من السيرفر، يبقى عليك فقط تشكيل الـ html من هذه النتيجة ثم اضافتها إلى الـ DOM

    $(document).ready(function () {
        $('#btnSearch').click(function () {
            $.ajax({
                type: "POST",
                url: "<?php echo base_url('user/search');?>",
                data: dataString,
                success: function (data) {
                    var content = '<table><tr><th>ID</th><th>Full Name</th><th>Mobile</th></tr>';
                    $.each(data, function (index, value) {
                        content += '<tr><td>' + data.ID + '</td><td>' + data.FULL_NAME + '</td><td>' + data.MOBILE +'</td></tr>';
                    });
                    content += '</table>';
                    $("#searchResult").html(content);
                }
            });
            return false;
        });
    });

لاحظ كيف قمنا بتشكيل الـ html داخل المتغير content ثم قمنا بالمرور على جميع العناصر، واضافة كل عنصر بشكل سطر. واخيرا اضافة ال html الناتج إلى الصفحة

 

بالتوفيق،،،

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

  • 0
بتاريخ 7 ساعات قال طارق جهاد:

وعليكم السلام ورحمة الله

اذا كنت نتيجة الـ JSON تأتي صحيحة من السيرفر، يبقى عليك فقط تشكيل الـ html من هذه النتيجة ثم اضافتها إلى الـ DOM


    $(document).ready(function () {
        $('#btnSearch').click(function () {
            $.ajax({
                type: "POST",
                url: "<?php echo base_url('user/search');?>",
                data: dataString,
                success: function (data) {
                    var content = '<table><tr><th>ID</th><th>Full Name</th><th>Mobile</th></tr>';
                    $.each(data, function (index, value) {
                        content += '<tr><td>' + data.ID + '</td><td>' + data.FULL_NAME + '</td><td>' + data.MOBILE +'</td></tr>';
                    });
                    content += '</table>';
                    $("#searchResult").html(content);
                }
            });
            return false;
        });
    });

لاحظ كيف قمنا بتشكيل الـ html داخل المتغير content ثم قمنا بالمرور على جميع العناصر، واضافة كل عنصر بشكل سطر. واخيرا اضافة ال html الناتج إلى الصفحة

 

بالتوفيق،،،

بارك الله فيك اخي الكريم

ظهرت لي مشكلة وهي 

jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"ID":1,"FULL_NAME":"علي علي","MOBILE":"123456"}
    at s (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at Object.success ((index):541)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at y (jquery.min.js:4)
    at XMLHttpRequest.c (jquery.min.js:4)

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...