0

I have an ajax function which select data from database base on entered information i want this information in a table having a format like this

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

Here is my 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);


        }

    }


});

I got the tutorial for adding row here but it is not behaving like i want it to.What i want is

  1. Result will show in a specific table (search result table) - ok
  2. The table will have a fix number of row (10 rows)
  3. If the result is below 10 the row will still be 10 if row is more than 10 it will show the next 10 with next and previous button
Community
  • 1
  • 1
Brownman Revival
  • 3,620
  • 9
  • 31
  • 69

2 Answers2

0

first of all: The first ("#searchresults") line you forgot to add the dollar sign $. So $("#searchresults").

Secondly: You shouldn't reassign the variable for this kind of task

Finally. My solution:

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);
}

i know it's not pretty and maybe cause some problems down the road. But hey!

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>
CyberFox
  • 780
  • 6
  • 24
  • i was able to make it work with sir Oleg Dubas comment what about 2 and 3 ? – Brownman Revival Jan 22 '15 at 07:30
  • Oleg Dubas 2nd an 3rd comment? – CyberFox Jan 22 '15 at 07:39
  • `2.The table will have a fix number of row (10 rows) 3.If the result is below 10 the row will still be 10 if row is more than 10 it will show the next 10 with next and previous button` – Brownman Revival Jan 22 '15 at 07:41
  • Ok so "#searchresults" is gonna be the id of your element. You're gonna push some content into it. I'm sorry I'm gonna need to correct my code.
     – CyberFox Jan 22 '15 at 07:42
  • You will iterate 10 objects no matter what. So put a fixed length on the for loop. Then when you run out of objects to display we have a null checker to assign that row to a blank object. Simply preventing the program from crashing. Also resulting in the remaining rows showing up as either blank or with a "null" text inside. – CyberFox Jan 22 '15 at 07:46
  • sir the other result is undefined – Brownman Revival Jan 22 '15 at 08:01
  • Last edit: I went too far though. It's not a module that makes the rows automatically just by looking at the property names. Anyways enjoy. – CyberFox Jan 22 '15 at 15:58
0

For your number 2: Just use 

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

Then if data[i] is null, you could instantiate empty values for data[i]

For your number 3:

You should edit your php so it accept something like table.php?limit=10&startRow=10 (this should fetch the second page)

HoangND
  • 398
  • 2
  • 12
  • for number 3 when i return the value of select from php to ajax i dont limit the search to 10 i just search possible result..is this not possible to deal with separating 10 entry do i need to limit it then i need to fire the search again if this is the case right? – Brownman Revival Jan 22 '15 at 07:55
  • Yeah, you can save ajax result to a variable and create another variable pageNumber default to 0. Each time you want to refresh the table use this loop for(i=limit*pageNumber; i – HoangND Jan 22 '15 at 08:23
  • that is a bit complicated for my level sir any other way? – Brownman Revival Jan 22 '15 at 08:25
  • Print all the the rows but hide it using css or .hide() Set id for each row as "row-id" (e.g: row-0, row-1) Here is the code to do it: var tr = $(''); Then only display row if id/(10*pageNumber) >= 1 – HoangND Jan 22 '15 at 08:30