Ajax 数据显示在包含 10 行的表中

ajax data show in table with 10 row

本文关键字：包含 数据 显示 Ajax      更新时间：2023-09-26

我有一个ajax函数，它根据输入的信息从数据库中选择数据，我希望这些信息在具有以下格式的表中

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

这是我的阿贾克斯

$.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);

        }
    }

});
我

得到了在这里添加行的教程，但它的行为不像我想要的那样。我想要的是

  1. 结果将显示在特定表（搜索结果表）中 - 确定
  2. 该表将具有固定的行数（10 行）
  3. 如果结果低于 10，则如果行更多，则行仍将为 10比 10 它将显示下一个 10 带有下一个和上一个按钮

对于你的数字 2：只需使用 

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

然后，如果 data[i] 为空，则可以实例化数据 [i] 的空值

对于您的数字 3：

你应该编辑你的php，让它接受类似table.php？limit=10&startRow=10的东西（这应该得到第二页）

首先：您忘记添加美元符号$的第一行（"#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>

相关文章：