How to change the product listing to show 2 items on each row?

Question

This is the jsfiddle link please refer here for the full set of HTML and Javascript codes. http://jsfiddle.net/6ge12hLs/3

It is currently only showing the whole row itself. Would appreciate if someone could help out to change it to show 2 items per row.

'''

ProductContent += '<tr>';
                    //Looping the products out
                    $.each(resp.message, function (index, value) {


                            ProductContent +=
                                '<td>' +
                                '<div class="col-xs-4">' +
                                '<div class="panel panel-info" style="width: 12rem;">' +
                                '<div class="panel-heading">' + value.product_name + '</div>' +
                                '<div class="panel-body">' +
                                '<img src="https://bitmp08.projectsbit.org/product_images/' + value.product_picture + '"style="width:100px; height:100px;"/>' +
                                '</div><div class="panel-heading">$' + value.product_price + '.00' +

                                '<br>' + value.product_brand +
                                '<br>' + value.product_color +
                                '<br>' + value.product_category +
                                '<br>' +
                                '<button  align: center onclick="myFunction()" class="btn btn-danger btn-xs">View</button></div></div></div></td>';





                    });

                    ProductContent += '</tr>';

                    $("#product_list").html(ProductContent);




            } 
        }
    })
}

});

'''

score 1 · Accepted Answer · answered Nov 13 '19 at 19:50

In my opinion table here is completely unnecessary You have bootstrap to Your disposition so You can delete table, and use col-xs-6 in every product to achieve exactly 2 products per row.

I forked Your code and make some changes:

First change in HTML:

<div class="table-responsive">
    <div id="product_list">                     
    </div>
</div>

Second Change is in javascript:

var resp = jQuery.parseJSON(JSON.stringify(response));
var responselength = resp.message.length;
if (resp.status == 1) {
//creating a variable to store the final display conetent          
var ProductContent = '';
// creating two varible for the limit of items looped out each row in the page.
// var tableitemcount = 0;
// var tableitemlimit = 7;
//Looping the products out
$.each(resp.message, function (index, value) {
ProductContent +=
'
<div class="col-xs-6">
   ' +
   '
   <div class="panel panel-info">
      ' +
      '
      <div class="panel-heading">' + value.product_name + '</div>
      ' +
      '
      <div class="panel-body">' +
         '<img src="https://bitmp08.projectsbit.org/product_images/' + value.product_picture + '"style="width:100px; height:100px;"/>' +
         '
      </div>
      <div class="panel-heading">$' + value.product_price + '.00' +
         '<br>' + value.product_brand +
         '<br>' + value.product_color +
         '<br>' + value.product_category +
         '<br>' +
         '<button  align: center onclick="myFunction()" class="btn btn-danger btn-xs">View</button>
      </div>
   </div>
</div>
';              
});
$("#product_list").html(ProductContent);

http://jsfiddle.net/0s4vz3ny/

you beat me to it. I was writing exactly the same thing. I don't think this is a JS issue so much as an html/CSS issue. +1 for you! — aberkow, Nov 13 '19 at 19:58

How to change the product listing to show 2 items on each row?

1 Answers1