1
\$\begingroup\$

I have a Java script that handles pagination on a particular page by using a jQuery pagination plugin. Is there any way to improve the code?

 <script>

    var BlogPosts = "";
    var UserPics = "";
    var startHtml = '<div class="col-md-4"><div class="box-generic padding-none">';
    var beforeEndHtml = '<div class="innerAll"><span><i class="fa fa-clock-o fa-fw"></i> ';
    var headerHtml = "";
    var displayPicHtml = "";
    var timeHtml = '';
    var endHtml = '</span></div></div></div>';
    var imageUrl = "";
    var allBlogPost = " ";
    var blogPostUrl = "";

    $.ajax({
        type: 'get',
        url: '/api/BlogPostApi/AllBlogPosts',
        async: false,
        success: function(result) {
            BlogPosts = result;
        }
    });

    $.ajax({
        type: 'get',
        url: '/api/BlogPostApi/AllUserPic',
        async: false,
        success: function(result) {
            UserPics = result;

        }
    });

    $('#pagination-demo').twbsPagination({
        totalPages: Math.round(BlogPosts.length / 3) + 1,
        visiblePages: 7,
        onPageClick: function (event, page) {

            allBlogPost = " ";
            for (var i = 3*page-3; i < 3 * page; i++) {

                if (i > BlogPosts.length-1) {
                    break;
                }
                blogPostUrl = "<a href='/Front/BlogArticle?blogPostId" + "=" + BlogPosts[i].BlogPostId + "'";
                for (var x = 0; x < UserPics.length; x++) { 
                    if (UserPics[x].UserName.trim()  == BlogPosts[i].UserName.trim() ) {
                        imageUrl = '<img src="' + UserPics[x].PictureUrl + '" alt="photo" class="img-responsive innerAll inner-2x border-bottom">';
                        break;
                    }                   
                }

                displayPicHtml = blogPostUrl + '>' + imageUrl + '</a>';
                headerHtml = '<h4 class="innerAll border-bottom margin-none">' + blogPostUrl + ' title=' + BlogPosts[i].Title + '>' + BlogPosts[i].Title + '</a></h4>';
                timeHtml = '<i>' + BlogPosts[i].DateAdded + '</i>';

                allBlogPost += startHtml + displayPicHtml + headerHtml + beforeEndHtml + timeHtml + endHtml;                   
            }               
            $('#BlogPostsDivs').html(allBlogPost);
        }
    });
</script>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.