Отображение данных в виде таблицы с использованием $ .ajax () и jQuery - PullRequest
Новая
       9

Отображение данных в виде таблицы с использованием $ .ajax () и jQuery

1 голос
/ 30 мая 2011

Я новичок в jQuery и PHP. Я разрабатываю веб-страницу для отображения набора записей, взятых из базы данных. Здесь я использовал PHP и JQuery. Мне нужно отобразить набор записей в виде таблицы. Данные извлекаются из базы данных MySQL с использованием php. Набор строк передается на html-страницу в виде строки, используя json_encode().

Проблема в том, что я не могу отображать эти данные в строке строка за строкой. Я использую таблицу, созданную с <div>. Поэтому мне нужно знать, как отображать эту строку данных строка за строкой и разделять значения для каждого столбца.

Вот что я сделал, чтобы отобразить только одну строку, но данные не отображаются в виде таблицы. Нет ошибки компиляции либо. Мне нужна помощь, чтобы расширить это, чтобы отобразить несколько строк.

demo.html (страница, на которой я собираюсь отобразить записи): 

    <div class="table">
<div class="headRow">
    <div class="cell">ID</div>
    <div class="cell">First Name</div>
    <div class="cell">Last Name</div>
    <div class="cell">Age</div>
    <div class="cell">Class</div>


 <script type="text/javascript">
    $(document).ready(function(){

        $.ajax({

            url: 'beta.php' ,
            data:"",
            dataType: 'json',
            success:function(data){
                var elementArray = new Array();         //creating the array
                elementArray = data.split("");          //splitting the string which was passed using json_encode()


                var id = elementArray[0];               //passing values corresponding to the columns
                var fname = elementArray[1];
                var lname = elementArray[2];
                var age = elementArray[3];
                var grade = elementArray[4];


            $("<div>", {                        //creating a new div element and assiging the value and appending it to the column 1
                "class":"cell",
                "text":id
            }) 
            .appendTo("document.body");

            $("<div>", {                        //cloumn 2 value
                "class":"cell",
                "text":fnam
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 3 value
                "class":"cell",
                "text":lname
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 4 value
                "class":"cell",
                "text":age
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 5 value
                "class":"cell",
                "text":grade
            })
            .appendTo("document.body");

            }       

    });

});

 </script>
</div>
</div>

demo.php (получение данных из базы данных): 

    $result = mysql_query("SELECT * FROM student WHERE StuId=1",$con) or die (mysql_error());


$resultArray = mysql_fetch_row($result);    
echo json_encode($value);

Если кто-то может мне помочь, это было бы здорово.

Ответы [ 2 ]

2 голосов
/ 30 мая 2011

попробуйте это .... 

        var id = elementArray[0];              
        var fname = elementArray[1];
        var lname = elementArray[2];
        var age = elementArray[3];
        var grade = elementArray[4];

, затем создайте таблицу, используя эти значения, примерно так ... 

 $("<table>").appendTo("document.body");


 $("table").html("<tr><td>"+id +"</td><td>"+fname +"</td><td>"+lname +"</td><td>"+age +"</td><td>"+grade +"</td></tr>);
0 голосов
/ 30 мая 2011

Вот Jfiddle, если вы используете .html и добавляете в пустую таблицу на своей странице, вы можете добавить содержимое var, возвращенное из вашего ajax-запроса, точно так же http://jsfiddle.net/L4G79/1/

, этот код будет выглядетьчто-то вроде 

 var id = elementArray[0];               //passing values corresponding to the columns
            var fname = elementArray[1];
            var lname = elementArray[2];
            var age = elementArray[3];
            var grade = elementArray[4];


 $("table").html("<tr><td>"+id +"</td><td>"+fname +"</td><td>"+lname +"</td><td>"+age +"</td><td>"+grade +"</td></tr>");
...