locked
Jquery pagination doesnt display image RRS feed

  • Question

  • User-1379762086 posted

    Hello everybody, i have a web application that fetches data from the server using adding Ajax with Jquery pagination, everything is fine exception that if the next page is clicked, image doesnt display but all the other information will show, i can also confirm that the source image url is correct. Below is my jquery code, is there anything i can do to improve the below code and make pictures always load. NOTE that images display very well when page is load for the first time, the problem is on pagination.

    <script type="text/javascript">
    $(document).ready(function () {
    GetAllCommodity('1');
    });

    function GetAllCommodity(mycurrentpage) {
    $("#salerecords").empty();
    $(".pagination").empty();

    $.ajax({
    url: "GetAllCommodity/" + mycurrentpage,
    typr: "GET",

    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    var tr;

    var delayval = 0;

    $.each(result.getcommidy, function (index, item) {

    $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    delayval = delayval + 0.1;


    });

    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');

    if (result.currentpage>1) {
    var prvss = result.currentpage - 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
    }

    for (i = 1; i <= result.numberOfPages; i++) {

    if (result.currentpage == i) {

    $(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
    }
    else {

    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
    }

    }


    if (result.numberOfPages > result.currentpage) {
    var nextt = result.currentpage + 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
    }
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');

    },
    error: function (result) {
    alert("Error" + result.responseText);
    }
    });

    }


    function GetAllCommoditypagination(mycurrentpage) {

    $("#salerecords").empty();
    $(".pagination").empty();
    $.ajax({
    url: "GetAllCommodity/" + mycurrentpage,
    typr: "GET",

    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    var tr;

    var delayval = 0;

    $.each(result.getcommidy, function (index, item) {

    $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    delayval = delayval + 0.1;


    });

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(1);return false;" class="prev" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>');
    if (result.currentpage > 1) {
    var prvss = result.currentpage - 1;
    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
    }
    for (i = 1; i <= result.numberOfPages; i++) {

    if (result.currentpage == i) {

    $('.pagination').append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
    }
    else {

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
    }

    }


    if (result.numberOfPages > result.currentpage) {
    var nextt = result.currentpage + 1;
    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
    }

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');

    },
    error: function (result) {
    alert("Error" + result.responseText);
    }
    });

    }
    </script>

    Wednesday, April 24, 2019 10:15 AM

Answers

  • User-1379762086 posted

    Thank everybody for your assistance, i noticed that when i put the image path on "src" instead of  "data-echo" everything started working well. i dont really know data-echo can work well with pagination.

    this was my script 

    <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">

    i removed data-echo and use just the src

    <img src="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 3:01 PM

All replies

  • User-474980206 posted

    what does the browsers network trace say about the image fetches?

    Wednesday, April 24, 2019 10:16 PM
  • User839733648 posted

    Hi abfrank,

    According to your description, I've simulated a table with pagination. The image works well on my side,

    As bruce has asked, have you use F12 developer tools to check if there is any useful information there?

    And if possible, could you please provide how is your page designed code and what the plugin you have use?

    This will be easier to help with you.

    Best Regards,

    Jenifer

    Thursday, April 25, 2019 9:53 AM
  • User-1379762086 posted

    Thank you Jenifer, like i said before the data is properly fetched but the make is not loaded, the image url is also fetched properly. below is my page script.

    @{
    ViewData["Title"] = "Manibell Home";
    }

    <div class="body-content outer-top-xs">

    <div class="container">
    <div class="row category-v1 outer-bottom-sm">
    <div class="col-md-3 col-sm-12 sidebar">
    <div class="side-menu">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <h3 class="section-title">category</h3>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Women </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
    <ul>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Clothing
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Footwear
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Bags, Belts &amps; Wallets
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Watches
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Beauty &amps; Wellness
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Perfumes
    </label>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Men </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
    <ul>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Clothing
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Footwear
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Bags, Belts &amps; Wallets
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Watches
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Beauty &amps; Wellness
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Perfumes
    </label>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Kids </a> </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
    <ul>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Clothing
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Footwear
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Bags, Belts &amps; Wallets
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Watches
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Beauty &amps; Wellness
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Perfumes
    </label>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingFour">
    <h4 class="panel-title no-items"> <a class="collapsed" href="#" data-toggle="collapse" data-parent="#accordion"> Accessories </a> </h4>
    </div>
    </div>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingFive">
    <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> Dress </a> </h4>
    </div>
    <div id="collapseFive" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingFive">
    <div class="panel-body">
    <ul>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Clothing
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Footwear
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Bags, Belts &amps; Wallets
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Watches
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Beauty &amps; Wellness
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Perfumes
    </label>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
    <div class="panel-heading" role="tab" id="headingSix">
    <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> Shoes </a> </h4>
    </div>
    <div id="collapseSix" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingSix">
    <div class="panel-body">
    <ul>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Clothing
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Footwear
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Bags, Belts &amps; Wallets
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Watches
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Beauty &amps; Wellness
    </label>
    </div>
    </li>
    <li>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Perfumes
    </label>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    <h3 class="section-title">Filter By Price</h3>
    <div class="sidebar-filter">

    <h4 class="sidebar-sub-title">price</h4>
    <div class="sidebar-widget">
    <div class="sidebar-widget-body">
    <div class="price-range-holder">
    <input type="text" class="price-slider">
    <input type="text" class="price-input" value="60"> <i class="fa fa-minus"></i>
    <input type="text" class="price-input" value="696"> <a href="#">search</a>
    </div>
    </div>
    </div>

    </div>

    <div class="sidebar-advertisment wow fadeIn" data-wow-delay="0.2s">
    <img class="img-responsive" src="assets/images/sliders/1.png" alt="">
    <div class="content-text">
    <span>new design</span>
    <h3>fashion</h3>
    </div>
    </div>
    </div>
    <div class=" col-md-9 col-sm-12 outer-bottom-sm">
    <div class="clearfix"></div>
    <div id="category" class="gird-v1-banner wow fadeIn">
    <div class="item">
    <div class="image"> <img src="assets/images/banners/1.jpg" alt="" class="img-responsive"> </div>
    <div class="container-fluid">
    <div class="caption vertical-top">
    <div class="small-text wow fadeIn" data-wow-delay="0.2s">women’s</div>
    <div class="big-text wow fadeIn" data-wow-delay="0.4s">accessories</div>
    <div class="bottom-line wow fadeIn" data-wow-delay="0.6s">Save up to 25% for all in your order.</div>
    </div>
    </div>
    </div>
    </div>
    <div class="controls-product-top outer-top-vs wow fadeInUp">
    <div class="controls-product-item row">
    <div class="col-sm-3 col-md-3">
    <div class="product-item-view">
    <ul class="nav nav-tabs">
    <li><span>View as:</span></li>
    <li class="active"><a data-toggle="tab" href="#grid-container"><i class="icon fa fa-th"></i></a></li>
    <li><a data-toggle="tab" href="#list-container"><i class="icon fa fa-th-list"></i></a></li>
    </ul>
    </div>
    </div>
    <div class="col-sm-5 col-md-6">
    <div class="custom-select">
    <ul class="list-unstyled">
    <li class="short-by">
    <label>Sort by:</label>
    <select class="styled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </select>
    </li>
    <li class="show-page">
    <label>Show:</label>
    <select class="styled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </select>
    </li>
    </ul>
    </div>
    </div>
    <div class="col col-sm-4 col-md-3">
    <nav>
    <ul class="pagination" id="mypagination1"></ul>
    </nav>
    </div>
    </div>
    </div>
    <div class="search-result-container">
    <div id="myTabContent" class="tab-content">
    <div class="tab-pane active " id="grid-container">
    <div class="category-product inner-top-xs">
    <div id="salerecords" class="row">

    </div>
    </div>
    </div>
    <div class="tab-pane outer-top-vs" id="list-container">
    <div class="category-product ">
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/12.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text sale">sale</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0.1s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/9.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text hot">hot</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0.2s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/10.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text new">new</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0.3s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/8.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text new">new</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0.4s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/7.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text new">new</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="category-product-inner wow fadeInUp" data-wow-delay="0.5s">
    <div class="products product-item-list-v1">
    <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <div class="product-image">
    <div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/12.jpg" class="img-responsive" alt=""> </div>
    <div class="tag">
    <div class="tag-text new">new</div>
    </div>
    </div>
    </div>
    <div class="col-md-9 col-sm-8 col-xs-12">
    <div class="product-info">
    <h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
    <div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
    <div class="product-price">
    <ins> <span class="amount">$ 369.99</span> </ins>
    <del><span class="amount">$ 400.99</span></del>
    </div>
    <div class="product-short-desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
    </div>
    </div>
    <div class="cart animate-effect">
    <div class="action">
    <ul class="list-unstyled">
    <li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
    <li>
    <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
    </li>
    <li>
    <a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="clearfix controls-product-bottom wow fadeInUp">
    <div class="controls-product-item row">
    <div class="col-sm-3 col-md-3">
    <div class="product-item-view">
    <ul class="nav nav-tabs">
    <li><span>View as:</span></li>
    <li class="active"><a data-toggle="tab" href="#grid-container"><i class="icon fa fa-th"></i></a></li>
    <li><a data-toggle="tab" href="#list-container"><i class="icon fa fa-th-list"></i></a></li>
    </ul>
    </div>
    </div>
    <div class="col-sm-5 col-md-6">
    <div class="custom-select">
    <ul class="list-unstyled">
    <li class="short-by">
    <label>Sort by:</label>
    <select class="styled">
    <option>Position</option>
    <option>Low</option>
    <option>High</option>
    <option>A to Z</option>
    </select>
    </li>
    <li class="show-page">
    <label>Show:</label>
    <select class="styled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </select>
    </li>
    </ul>
    </div>
    </div>
    <div class="col col-sm-4 col-md-3">
    <nav>
    <ul class="pagination" id="mypagination">

    </ul>
    </nav>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    <script src="~/assets/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">

    //(function () {
    // getData();
    //})();
    $(document).ready(function () {
    GetAllCommodity('1');
    //GetAllCommoditypagination(2);
    //getCategory();
    // $("#StartDate").datetimepicker({ format: 'dd/mm/yyyy', pickTime: false, autoclose: true, minView: 2 });
    //$("#endDate").datetimepicker({ format: 'dd/mm/yyyy', pickTime: false, autoclose: true, minView: 2 });
    });
    //function GetResultData()
    //{
    // GetResultData();
    //}

    function ShowItems() {
    $("#myModal").modal('show');
    $('#smSuccdiv').hide();
    $('#smerror').hide();
    }

    function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
    }


    function Formatdate(Jsondate) {
    if (Jsondate == null || Jsondate == '') {
    return Jsondate;
    }
    else {
    var mydate = new Date(eval('new' + Jsondate.replace(/\//g, ' ')));
    var month = mydate.getMonth() + 1;
    var day = mydate.getDate();
    var year = mydate.getFullYear();
    var date = day + "/" + month + "/" + year;
    return date;
    }

    }


    function GetAllCommoditypagination(mycurrentpage) {

    $("#salerecords").empty();
    $(".pagination").empty();
    $.ajax({
    url: "GetAllCommodity/" + mycurrentpage,
    typr: "GET",
    //data: {
    // startdate: $('#StartDate').val(),
    // endDate: $('#endDate').val()
    //},
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    var tr;
    //Append each row to html table
    //for (var i = 0; i < result.course.length; i++) {
    var delayval = 0;

    $.each(result.getcommidy, function (index, item) {
    // $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
    // var imagepath = 'http://localhost/nosameApi/'+ item.imagepath;
    $('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    delayval = delayval + 0.1;


    });

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(1);return false;" class="prev" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>');
    if (result.currentpage > 1) {
    var prvss = result.currentpage - 1;
    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
    }
    for (i = 1; i <= result.numberOfPages; i++) {

    if (result.currentpage == i) {

    $('.pagination').append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
    }
    else {

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
    }

    }


    if (result.numberOfPages > result.currentpage) {
    var nextt = result.currentpage + 1;
    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
    }

    $('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');

    },
    error: function (result) {
    alert("Error" + result.responseText);
    }
    });

    }

    function GetAllCommodity(mycurrentpage) {
    $("#salerecords").empty();
    $(".pagination").empty();

    $.ajax({
    url: "GetAllCommodity/" + mycurrentpage,
    typr: "GET",
    //data: {
    // startdate: $('#StartDate').val(),
    // endDate: $('#endDate').val()
    //},
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    var tr;
    //Append each row to html table
    //for (var i = 0; i < result.course.length; i++) {
    var delayval = 0;

    $.each(result.getcommidy, function (index, item) {
    // $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    $('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    delayval = delayval + 0.1;


    });

    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');

    if (result.currentpage>1) {
    var prvss = result.currentpage - 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
    }

    for (i = 1; i <= result.numberOfPages; i++) {

    if (result.currentpage == i) {

    $(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
    }
    else {

    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
    }

    }


    if (result.numberOfPages > result.currentpage) {
    var nextt = result.currentpage + 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
    }
    $(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');

    },
    error: function (result) {
    alert("Error" + result.responseText);
    }
    });

    }


    function SearchCommodity(mycurrentpage) {
    $("#salerecords").empty();
    $(".pagination").empty();

    $.ajax({
    url: "GetAllCommodity/" + mycurrentpage,
    typr: "GET",
    //data: {
    // startdate: $('#StartDate').val(),
    // endDate: $('#endDate').val()
    //},
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    var tr;
    //Append each row to html table
    //for (var i = 0; i < result.course.length; i++) {
    var delayval = 0;

    $.each(result.getcommidy, function (index, item) {
    // $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    $('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');

    delayval = delayval + 0.1;


    });

    $(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');

    if (result.currentpage > 1) {
    var prvss = result.currentpage - 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
    }

    for (i = 1; i <= result.numberOfPages; i++) {

    if (result.currentpage == i) {

    $(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "SearchCommodity(' + i + ');return false;">' + i + '</a></li>');
    }
    else {

    $(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + i + ');return false;">' + i + '</a></li>');
    }

    }


    if (result.numberOfPages > result.currentpage) {
    var nextt = result.currentpage + 1;
    $(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
    }
    $(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');

    },
    error: function (result) {
    alert("Error" + result.responseText);
    }
    });

    }

    function Formatdate(Jsondate) {
    if (Jsondate == null || Jsondate == '') {
    return Jsondate;
    }
    else {
    var mydate = new Date(eval('new' + Jsondate.replace(/\//g, ' ')));
    var month = mydate.getMonth() + 1;
    var day = mydate.getDate();
    var year = mydate.getFullYear();
    var currentHour = mydate.getHours();
    var currentMinute = mydate.getMinutes();
    var currentSecond = mydate.getSeconds();
    var myclock;
    var dn = "AM"
    if (currentHour > 12) {
    dn = "PM"
    currentHour = currentHour - 12
    } if (currentHour == 0)
    currentHour = 12
    if (currentMinute <= 9)
    currentMinute = "0" + currentMinute
    if (currentSecond <= 9)
    currentSecond = "0" + currentSecond
    myclock = "" + currentHour + ":" + currentMinute + ":" + currentSecond + " " + dn;


    var date = day + "/" + month + "/" + year + " " + myclock;
    return date;
    }

    }

    </script>

    Thursday, April 25, 2019 11:20 AM
  • User-2054057000 posted

    It seems you are using some pagination built codes that is not working properly. If you check the network tab of your browser you will see 404 error when clicking on your paginating links. You can then easily debug your problem. 

    Reference - How to Create jQuery Pagination System in your Web Page

    Thursday, April 25, 2019 6:27 PM
  • User-1379762086 posted

    Thank everybody for your assistance, i noticed that when i put the image path on "src" instead of  "data-echo" everything started working well. i dont really know data-echo can work well with pagination.

    this was my script 

    <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">

    i removed data-echo and use just the src

    <img src="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 3:01 PM