• 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

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


رابط هذه المساهمة
  • 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 الناتج إلى الصفحة

 

بالتوفيق،،،

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

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


رابط هذه المساهمة
  • 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)

 

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


رابط هذه المساهمة

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

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

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


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

تسجيل الدخول

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


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