使用ajax使用JSON数据填充现有表

时间：2014-12-10 16:01:46

标签： html mysql json ajax html-table

我一直在寻找一种方法来填充带有分隔JSON的现有html表。

到目前为止我所拥有的： 从mysql数据库中获取数据的api.php：

$id = $_GET['id'];
$query = 'SELECT id, username, level, email, active, last_login FROM cpusers LIMIT ' . $id . ', 10';
$result = mysqli_query($con, $query);
for(
    $array = array();
    $row = mysqli_fetch_assoc($result);
    $array[] = $row
);
echo json_encode($array);

我的HTML：

<html>

<head>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js">

    </script>
    <script language="JavaScript" type="text/javascript">
        $(function() {

        var mydata = '';
        var previd = parseInt($("#prev").attr('data-firstid'));
        var nextid = parseInt($("#next").attr('data-lastid'));
        var actualid = 0;

        function getdata(value) {
            $.ajax({
                type: "GET",
                async: false,
                url: "api.php",
                data: 'table=id='+value, 
                success: function(data){
                    mydata = jQuery.parseJSON(data)
                }
            });
        }

            if ( previd == -1 && nextid == -1 ) {
                getdata(actualid)
                pageMe(mydata);
                if (mydata.length < 10) {
                    $("#next").hide();
                } else {
                    nextid = actualid + 1;
                    $("#next").attr("data-lastid", nextid);
                    $("#next").show();
                }
            }

            if ( previd == -1  ) {
                $("#prev").hide();
            } else {
                $("#prev").show();
            }

            //register your click event
            $("#prev").click(function() {
                actualid = parseInt($(this).attr('data-firstid'));
                previd = actualid - 1;
                nextid = actualid + 1;
                getdata(actualid);
                pageMe(mydata);
                $("#prev").attr("data-firstid", previd);
                $("#next").attr("data-lastid", nextid);
                if ( previd == -1  ) {
                    $("#prev").hide();
                } else {
                    $("#prev").show();
                }
            });

            $("#next").click(function() {
                actualid = parseInt($(this).attr('data-lastid'));
                previd = actualid - 1;
                getdata(actualid);
                pageMe(mydata);
                $("#prev").attr("data-firstid", previd);
                $("#prev").show();
                if (mydata.length < 10) {
                    $("#next").hide();
                } else {
                    nextid = actualid + 1;
                    $("#next").attr("data-lastid", nextid);
                    $("#next").show();
                }
            });
        });

        function pageMe(data) {
            clearMyTable();
            if (typeof data == 'undefined') return;
            for (var i = 0; i < data.length; i++) {
                var rowdata = data[i];
                if (typeof rowdata == 'undefined') break;
                $("#" + i + "0").text(rowdata.username);
                $("#" + i + "1").text(rowdata.email);
                $("#" + i + "2").text(rowdata.level);
                $("#" + i + "3").text(rowdata.last_login);
                $("#" + i + "4").text(rowdata.active);
            }
        }

        function clearMyTable()
        {
           for (var i = 0; i < 10; i++) {
                $("#" + i + "0").text("");
                $("#" + i + "1").text("");
                $("#" + i + "2").text("");
                $("#" + i + "3").text("");
                $("#" + i + "4").text("");

            } 
        }
    </script>
</head>

<body>
    <table border="0" cellspacing="5" cellpadding="0">
        <tr id="header">
            <td align="center">Account</td>
            <td align="center">Email Address</td>
            <td align="center">Level</td>
            <td align="center">Last Login</td>
            <td align="center">Active</td>
        </tr>
        <tr id="Line0">
            <td align="center" id="00">&nbsp;</td>
            <td align="center" id="01">&nbsp;</td>
            <td align="center" id="02">&nbsp;</td>
            <td align="center" id="03">&nbsp;</td>
            <td align="center" id="04">&nbsp;</td>
        </tr>
        <tr id="Line1">
            <td align="center" id="10">&nbsp;</td>
            <td align="center" id="11">&nbsp;</td>
            <td align="center" id="12">&nbsp;</td>
            <td align="center" id="13">&nbsp;</td>
            <td align="center" id="14">&nbsp;</td>
        </tr>
        <tr id="Line2">
            <td align="center" id="20">&nbsp;</td>
            <td align="center" id="21">&nbsp;</td>
            <td align="center" id="22">&nbsp;</td>
            <td align="center" id="23">&nbsp;</td>
            <td align="center" id="24">&nbsp;</td>
        </tr>
        <tr id="Line3">
            <td align="center" id="30">&nbsp;</td>
            <td align="center" id="31">&nbsp;</td>
            <td align="center" id="32">&nbsp;</td>
            <td align="center" id="33">&nbsp;</td>
            <td align="center" id="34">&nbsp;</td>
        </tr>
        <tr id="Line4">
            <td align="center" id="40">&nbsp;</td>
            <td align="center" id="41">&nbsp;</td>
            <td align="center" id="42">&nbsp;</td>
            <td align="center" id="43">&nbsp;</td>
            <td align="center" id="44">&nbsp;</td>
        </tr>
        <tr id="Line5">
            <td align="center" id="50">&nbsp;</td>
            <td align="center" id="51">&nbsp;</td>
            <td align="center" id="52">&nbsp;</td>
            <td align="center" id="53">&nbsp;</td>
            <td align="center" id="54">&nbsp;</td>
        </tr>
        <tr id="Line6">
            <td align="center" id="60">&nbsp;</td>
            <td align="center" id="61">&nbsp;</td>
            <td align="center" id="62">&nbsp;</td>
            <td align="center" id="63">&nbsp;</td>
            <td align="center" id="64">&nbsp;</td>
        </tr>
        <tr id="Line7">
            <td align="center" id="70">&nbsp;</td>
            <td align="center" id="71">&nbsp;</td>
            <td align="center" id="72">&nbsp;</td>
            <td align="center" id="73">&nbsp;</td>
            <td align="center" id="74">&nbsp;</td>
        </tr>
        <tr id="Line8">
            <td align="center" id="80">&nbsp;</td>
            <td align="center" id="81">&nbsp;</td>
            <td align="center" id="82">&nbsp;</td>
            <td align="center" id="83">&nbsp;</td>
            <td align="center" id="84">&nbsp;</td>
        </tr>
        <tr id="Line9">
            <td align="center" id="90">&nbsp;</td>
            <td align="center" id="91">&nbsp;</td>
            <td align="center" id="92">&nbsp;</td>
            <td align="center" id="93">&nbsp;</td>
            <td align="center" id="94">&nbsp;</td>
        </tr>
        <tr id="Pagination">
            <td align="center" colspan="2"><a id="prev" data-firstid="-1" href="#">Previous</a>

            </td>
            <td align="center" colspan="3"><a id="next" data-lastid="-1" href="#">Next</a>

            </td>
        </tr>
    </table>
</body>

</html>

我无法让它发挥作用。 当页面加载时，应该从id为“0”的mysql数据填充表。然后使用“Previous”和“Next”链接进行分页。当到达mysql数据的末尾时，该表应填充数据并留空其余的单元格。 我需要一直有12行表。

任何帮助/建议表示赞赏。 注意：我发现的所有示例都看到了构建html表的ajax，并且没有创建已创建的表。我不想动态创建表，因为它会破坏我的所有视觉效果。

1 个答案:

答案 0 :(得分：0)

为您的目的使用免费的jqGrid怎么样？它在类似的情况下对我来说非常合适，它在堆栈溢出方面有很大的支持。 像你这样的php服务器端检查他们的演示： http://www.trirand.com/blog/jqgrid/jqgrid.html

BTW他们也有商业支持的服务器端组件，但javascript版本完全免费。

declaimer：与公司没有任何关系，只是免费组件的用户。

编辑： 我看到你的js代码有几个问题：

  1. $('.previouspage').click(function()未正确结束 - }必须是}）;你原来的html第27行。
  2. $('.previouspage').click(function()为将要按类搜索的元素注册onClick事件 - 您没有该类。你可以通过添加class =＆＃34; previouspage＆＃34;来测试这个。对你的元素，它将在点击时激活.BTW你什么时候打算加载你的第一页？
  3. 你的Line0 tr应该有id为10,11,12 ...而不是11,12,13 ......
    4. 的元素

    以下是我的工作示例，其中包含数据数组（目前我无法使用您的服务器端）。

    ＆＃13;
    ＆＃13; 
    <html>

<head>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js">
        
    </script>
    <script language="JavaScript" type="text/javascript">
        var mydata = [{
            id: "0",
            username: "test0",
            level: "1",
            email: "e@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "1",
            username: "test1",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "2",
            username: "test2",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "3",
            username: "test3",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "4",
            username: "test4",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "5",
            username: "test5",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "6",
            username: "test6",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "7",
            username: "test7",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "8",
            username: "test8",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "9",
            username: "test9",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "10",
            username: "test10",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "11",
            username: "test11",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }, {
            id: "12",
            username: "test12",
            level: "2",
            email: "eccc@e.com",
            active: "true",
            last_login: "2007-10-01"
        }];

        $(function() {

			var firstid = $("#prev").attr('data-firstid');
			var lastid = $("#next").attr('data-lastid');
		
            if ( firstid == -1 && lastid == -1 )
            {
                pageMe(mydata);

            }
			
			if ( firstid < 1  )
            {
                
				$("#prev").hide();

            }
			else {
			  $("#prev").show();
			}


            //register your click event
            $("#prev").click(function() {
			
                var id = parseInt($(this).attr('data-firstid'));
									
				var start = Math.max(0, id-11);
				var end = Math.max(10, id-1);
				var pagedata = mydata.slice(start, end);
				                    
                pageMe(pagedata);   

//for ajax you should have something like:
//  $.ajax({
//            type: "GET",
//            url: "api.php",
//            data: 'id='+start, 
//            success: pageMe  //NOTE no passing arguments!
//  });            

            });

            $("#next").click(function() {
			
                var id = parseInt($(this).attr('data-lastid'));
				
				if (id < -1) id = -1;
				
                var pagedata = mydata.slice(id+1, id+11);
                pageMe(pagedata);
				
				$("#prev").show();

            });


        });

        function pageMe(data) {

            clearMyTable();

			if (typeof data == 'undefined') return;
			
			if (data.length < 10) {
			  $("#next").hide();
			}
			else {
			  $("#next").show();
			}
			
            for (var i = 0; i < data.length; i++) {
			
					
                //that is single row for the table - the server will limit rows to ten
                var rowdata = data[i];

                if (typeof rowdata == 'undefined') break;
				
				

                if (i==0)
                {
                    //setting the prev id
                    $("#prev").attr("data-firstid", parseInt(rowdata.id));
                }

                $("#" + i + "0").text(rowdata.username);
                $("#" + i + "1").text(rowdata.email);
                $("#" + i + "2").text(rowdata.level);
                $("#" + i + "3").text(rowdata.last_login);
                $("#" + i + "4").text(rowdata.active);

                if (i == (data.length - 1) || i == 9 )
                {
                    //setting the prev id
                    $("#next").attr("data-lastid", parseInt(rowdata.id));
					break;
                }

            }

        }

        function clearMyTable()
        {
           for (var i = 0; i < 10; i++) {
                $("#prev").attr("data-firstid", -1);
				$("#next").attr("data-lastid", -1);
                $("#" + i + "0").text("");
                $("#" + i + "1").text("");
                $("#" + i + "2").text("");
                $("#" + i + "3").text("");
                $("#" + i + "4").text("");
                
            } 
        }
    </script>
</head>

<body>
    <table border="0" cellspacing="5" cellpadding="0">
        <tr id="header">
            <td align="center">Account</td>
            <td align="center">Email Address</td>
            <td align="center">Level</td>
            <td align="center">Last Login</td>
            <td align="center">Active</td>
        </tr>
        <tr id="Line0">
            <td align="center" id="00">&nbsp;</td>
            <td align="center" id="01">&nbsp;</td>
            <td align="center" id="02">&nbsp;</td>
            <td align="center" id="03">&nbsp;</td>
            <td align="center" id="04">&nbsp;</td>
        </tr>
        <tr id="Line1">
            <td align="center" id="10">&nbsp;</td>
            <td align="center" id="11">&nbsp;</td>
            <td align="center" id="12">&nbsp;</td>
            <td align="center" id="13">&nbsp;</td>
            <td align="center" id="14">&nbsp;</td>
        </tr>
        <tr id="Line2">
            <td align="center" id="20">&nbsp;</td>
            <td align="center" id="21">&nbsp;</td>
            <td align="center" id="22">&nbsp;</td>
            <td align="center" id="23">&nbsp;</td>
            <td align="center" id="24">&nbsp;</td>
        </tr>
        <tr id="Line3">
            <td align="center" id="30">&nbsp;</td>
            <td align="center" id="31">&nbsp;</td>
            <td align="center" id="32">&nbsp;</td>
            <td align="center" id="33">&nbsp;</td>
            <td align="center" id="34">&nbsp;</td>
        </tr>
        <tr id="Line4">
            <td align="center" id="40">&nbsp;</td>
            <td align="center" id="41">&nbsp;</td>
            <td align="center" id="42">&nbsp;</td>
            <td align="center" id="43">&nbsp;</td>
            <td align="center" id="44">&nbsp;</td>
        </tr>
        <tr id="Line5">
            <td align="center" id="50">&nbsp;</td>
            <td align="center" id="51">&nbsp;</td>
            <td align="center" id="52">&nbsp;</td>
            <td align="center" id="53">&nbsp;</td>
            <td align="center" id="54">&nbsp;</td>
        </tr>
        <tr id="Line6">
            <td align="center" id="60">&nbsp;</td>
            <td align="center" id="61">&nbsp;</td>
            <td align="center" id="62">&nbsp;</td>
            <td align="center" id="63">&nbsp;</td>
            <td align="center" id="64">&nbsp;</td>
        </tr>
        <tr id="Line7">
            <td align="center" id="70">&nbsp;</td>
            <td align="center" id="71">&nbsp;</td>
            <td align="center" id="72">&nbsp;</td>
            <td align="center" id="73">&nbsp;</td>
            <td align="center" id="74">&nbsp;</td>
        </tr>
        <tr id="Line8">
            <td align="center" id="80">&nbsp;</td>
            <td align="center" id="81">&nbsp;</td>
            <td align="center" id="82">&nbsp;</td>
            <td align="center" id="83">&nbsp;</td>
            <td align="center" id="84">&nbsp;</td>
        </tr>
        <tr id="Line9">
            <td align="center" id="90">&nbsp;</td>
            <td align="center" id="91">&nbsp;</td>
            <td align="center" id="92">&nbsp;</td>
            <td align="center" id="93">&nbsp;</td>
            <td align="center" id="94">&nbsp;</td>
        </tr>
        <tr id="Pagination">
            <td align="center" colspan="2"><a id="prev" data-firstid="-1" href="#">Previous</a>

            </td>
            <td align="center" colspan="3"><a id="next" data-lastid="-1" href="#">Next</a>

            </td>
        </tr>
    </table>
</body>

</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    编辑3： 好的，现在我们正在查看上面的代码。您需要通过调用ajax来删除数组操作。 你需要弄清楚如何为下一个调用ajax :) 希望这会有所帮助。

相关问题
最新问题