ajax数据显示在10行表中

时间:2015-01-22 06:13:38

标签: javascript php jquery mysql ajax

我有一个ajax函数,它根据输入的信息从数据库中选择数据我希望这个信息在一个像这样的格式的表中

System Id | Last Name | First Name | Middle Name | Address

这是我的ajax

$.ajax({
    type: 'POST',
    url: '../include/OwnerInformation.php',
    dataType: "json",
    data: {
        lastname: last_name,
        firstname: first_name,
        sysid: sys_id,
        address: address
    },
    success: function(data) {

        console.log(data);
        var tr = ("#searchresults");
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + "<a  id=" + data[i].sys_id + " href='#' value='" + data[i].sys_id + "'>" + data[i].sys_id + "</a>" + "</td>");
            tr.append("<td>" + data[i].firstname + "</td>");
            tr.append("<td>" + data[i].middlename + "</td>");
            tr.append("<td>" + data[i].lastname + "</td>");
            tr.append("<td>" + data[i].address + "," + "</td>");

            $('table').append(tr);


        }

    }


});

我收到了添加行here的教程,但它的行为并不像我想要的那样。我想要的是

  1. 结果将显示在特定表格(搜索结果表格)中 - 确定
  2. 该表将有一个行数(10行)
  3. 如果结果低于10,如果行更多,则行仍为10 超过10将显示下一个10和下一个和上一个按钮

2 个答案:

答案 0 :(得分:0)

首先:您忘记添加美元符号$的第一行(“#searchresults”)行。所以$(“#searchresults”)。

其次:你不应该为这种任务重新分配变量

最后。我的解决方案:

var table = $("#searchresults");
for (var i = 0; i < 10; i++) {
    if(data[i]==null)
        data[i] = {};
    var tr = $('<tr/>');
    tr.append("<td>" + "<a  id=" + data[i].sys_id + " href='#' value='" + data[i].sys_id + "'>" + data[i].sys_id + "</a>" + "</td>");
    tr.append("<td>" + data[i].firstname + "</td>");
    tr.append("<td>" + data[i].middlename + "</td>");
    tr.append("<td>" + data[i].lastname + "</td>");
    tr.append("<td>" + data[i].address + "," + "</td>");
    table.append(tr);
}

我知道它不漂亮,可能会导致一些问题。但是嘿!

var data = [
	{
		firstname:"Heinrich",
		middlename:"Lelouch",
		lastname:"Breinholdt",
		address:"German smurtz"
	},
	{
		firstname:"Cate",
		middlename:"Brom",
		lastname:"Lriah",
		address:"Somewhere"
	},
	{
		firstname:"Funky",
		middlename:"Daddy",
		lastname:"Man",
		address:"Funky land"
	}
];


///// You don't even need to touch this code!!!
var table = $("#searchresults");
(function(){// generate header row
  var tr = $('<tr>');
  if(data && data.length)
	for(var key in data[0])
	  tr.append("<td class='table-header'>"+key+"</td>");
  table.append(tr);
})();

// generate content rows
for (var i = 0; i < 10; i++) {
  var tr = $('<tr>');
  
  if(data[i])
	for(var key in data[i])
	  tr.append("<td>" + data[i][key] + "</td>");
  else
	for(var key in data[0])
	  tr.append("<td>&nbsp;</td>");
	table.append(tr);
}
#searchresults{
  border-collapse: collapse;
}
#searchresults td{
  border: 1px solid grey;
}
#searchresults .table-header{
  border-bottom: 2px solid black;
  padding: 3px 5px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="searchresults"></table>

答案 1 :(得分:0)

对于你的2号: 只需使用

for (var i = 0; i < 10; i++)

然后,如果data [i]为null,则可以实例化data [i]

的空值

您的号码3:

你应该编辑你的php,它接受像table.php这样的东西?limit = 10&amp; startRow = 10(这应该取第二页)