I have an AJAX that append tr to a table. The number of tr appended to the table is varies depend on the data returned. This is my AJAX:
success : function(data)
{
var tableData,t1,t2,t3,t4,t5,t6,t7;
var no = 1;
$.each(data.result_brg, function(index, rows_minta) {
t1 = "<tr><td><font size='1'>"+ no++ +"</font></td>";
t2 = "<td align='left'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>";
t3 = "<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>";
t4 = "<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>";
t5 = "<td></td>";
t6 = "<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>";
t7 = "<td></td></tr>";
tableData += t1+t2+t3+t4+t5+t6+t7;
$('#tbl_content tbody tr').remove();
$('#tbl_content tbody').append(tableData);
});
This is the table displayed:
No outlet item stock type unit invoice_no
1 outlet A Book 45
2 outlet A Pen 24
3 outlet A Pencil 87
4 outlet A Ruler 96
5 outlet B Bag 57
6 outlet B Shirt 32
7 outlet C SSD 64
The Table I'm looking for:
No outlet item stock type unit invoice_no
1 Book 45
2 Pen 24
outlet A
3 Pencil 87
4 Ruler 96
5 Bag 57
outlet B
6 Shirt 32
7 outlet C SSD 64
Note: The first column is should be centered (valign=middle and text_align=center)
I changed the answer to use a filter on the array to count how many outlet match the current outlet. That value is set in the row. This code is untested but I think it will be close to what you want.
success : function(data)
{
var no = 1;
var $tbody = $('#tbl_content tbody');
// clear table
$tbody.empty();
var last = "";
$.each(data.result_brg, function(index, rows_minta) {
// create new row
var $row = $("<tr></tr>");
// append the number td
$row.append("<td><font size='1'>"+ no++ +"</font></td>");
// append the outlet td if appropriate
if(last != rows_minta.NamaOutlet){
// use array filter on the dataset to count rows for rowspan
var len = data.result_brg.filter(function(cur){return cur == rows_minta.NamaOutlet}).length;
// append the ted
$row.append( "<td align='left' rowspan='"+len+"'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>");
// set up for next time
last = rows_minta.NamaOutlet;
}
// append the rest of the td
$row.append("<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>");
$row.append("<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>)";
$row.append("<td></td>");
$row.append("<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>");
$("<td></td>");
// append the row to the body
$tbody.append($row);
});
}