Click here to Skip to main content
15,608,404 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi, I'm a respected instructor in a given series of data files manually with jQuery and I was fine. Now I want to read data from the database if it's to do؟

JavaScript
var maxColumn = 4;    // max cells in a row 
        var range = 3;    // range of num links to show
        // end user setings
 
        var rowsPerPage = 0;
        var currentpage = 0;
        var maxPrice = 0;
        var minPrice = 0;
        var sortBy = '';
        var sortOrder = 0;
 
        // the products information array                           
        var products = [
                      { "id": "1", "category": "Apple", "price": 2860, "image": "images/sample5.jpg", "title": "Apple iPhone 4"  }
                      , { "id": "2", "category": "BlackBerry", "price": 450, "image": "images/BlackBerry-9780-Bold.gif", "title": "BlackBerry 9780 Bold" }
                      , { "id": "12", "category": "BlackBerry", "price": 520, "image": "images/BlackBerry-Torch-9800.gif", "title": "BlackBerry Torch 9800" }
                      , { "id": "26", "category": "HTC", "price": 1850, "image": "images/HTC-Desire-S.gif", "title": "HTC Desire S" }
                      , { "id": "50", "category": "HTC", "price": 600, "image": "images/HTC-HD7.gif", "title": "HTC HD7" }
                      , { "id": "21", "category": "HTC", "price": 2400, "image": "images/HTC-Incredible-S.gif", "title": "HTC Incredible S" }
                      , { "id": "11", "category": "HTC", "price": 2500, "image": "images/HTC-Sensation.gif", "title": "HTC Sensation" }
                      , { "id": "3", "category": "HTC", "price": 100, "image": "images/HTC-Wildfire.gif", "title": "HTC Wildfire" }
                      , { "id": "6", "category": "Motorola", "price": 2460, "image": "images/Motorola-Atrix-4G.gif", "title": "Motorola Atrix 4G" }
                      , { "id": "14", "category": "Motorola", "price": 100, "image": "images/Motorola-DEFY.gif", "title": "Motorola DEFY" }
                      , { "id": "15", "category": "Nokia", "price": 1200, "image": "images/Nokia-C7.gif", "title": "Nokia C7" }
                      , { "id": "60", "category": "Nokia", "price": 1700, "image": "images/Nokia-N8.gif", "title": "Nokia N8" }
                      , { "id": "70", "category": "Nokia", "price": 2000, "image": "images/Nokia-X6.gif", "title": "Nokia X6" }
                      , { "id": "45", "category": "Samsung", "price": 1800, "image": "images/Samsung-I9000-Galaxy-S.gif", "title": "Samsung I9000 Galaxy S" }
                      , { "id": "23", "category": "Samsung", "price": 2900, "image": "images/samsung-I9100-galaxy-S2.gif", "title": "samsung I9100 galaxy S2" }
                      , { "id": "17", "category": "Samsung", "price": 1300, "image": "images/Samsung-S5830-Galaxy-Ace.gif", "title": "Samsung S5830 Galaxy Ace" }
                      , { "id": "99", "category": "Sony-Ericsson", "price": 1400, "image": "images/Sony-Ericsson-XPERIA-X10.gif", "title": "Sony Ericsson XPERIA X10" }
        ];
 
 
        function setProducts() {
            sortBy = sortBy ? sortBy : $('#product_sort').val();
            rowsPerPage = rowsPerPage ? rowsPerPage : $('.product_pages button:first').html();
            desc = sortOrder > 0 ? true : false;
            currentpage = currentpage > 0 ? currentpage : 1; // if current page is less than first page...
            var totalLoop = rowsPerPage;
            var loop = 0;
            var countCellData = 0;
            var offset = 0;
               
            $('#product_show').html(' ');
             
            $('#product_order').val(sortOrder);
            $('#product_sort').val(sortBy);
 
            var filterdProducts = [];  // displayed products array
            var key = 0;
           
            if (!minPrice && !maxPrice) {
                filterdProducts = products;
            } else {
                $.each(products, function (i, object) {
                    var curentPrice = parseFloat(object.price);
                    var priceMinOk = true;
                    var priceMaxOk = true;
                     
                    if (maxPrice || minPrice) {
                        if (maxPrice && maxPrice < curentPrice) {
                            priceMaxOk = false;
                        }
                        if (minPrice && minPrice > curentPrice) {
                            priceMinOk = false;
                        }
                    }
                  
                    if (priceMinOk && priceMaxOk) {
                        filterdProducts[key] = object;
                        key++;
 
                    }
 
                });
            }
 
            
            var totalResults = filterdProducts.length;
            if (totalResults > 0) {
              
                filterdProducts.sort(function (a, b) {
                    var a1 = a[sortBy], b1 = b[sortBy];
                    if (a1 == b1) { return 0; }
                    if (desc) {
                        return (a1 > b1) ? -1 : (a1 < b1) ? 1 : 0;
                    } else {
                        return a1 > b1 ? 1 : -1;
                    }
                });
            }
            
            $('.product_results').html(totalResults);
            /****** start build pagination links ******/
            var totalpages = Math.ceil(totalResults / rowsPerPage); // calculate the total pages
 
            if (totalpages > 1) {
                
                if (currentpage > totalpages) {
                    
                    currentpage = totalpages;
                }
                  
                offset = (currentpage - 1) * rowsPerPage;
 
                var pagination = '';
                var lastPage = 0;
               
                var minPage = parseFloat(currentpage) - parseFloat(range);
                minPage = minPage > 0 ? minPage : 1;
                 
                if (currentpage > 1) {
                     
                    pagination += '<button type="button" name="' + (currentpage - 1) + '" class="product_button" title="◄Previous" >◄Previous<\/button>';
                    ) 
                    if (minPage > 1) {
                        pagination += '<button type="button" name="1" class="product_button" title="1" >1<\/button>';
                    }
                }
 
                
                for (var x = minPage; x <= (currentpage + range) ; x++) {
                      
                    if (x <= totalpages) {
                        lastPage = x;
                         
                        if (x == currentpage) {
                            pagination += '<button type="button" name="0" class="product_button_selected" title="' + x + '" >' + x + '<\/button>';
                        } else {
                            pagination += '<button type="button" name="' + x + '" class="product_button" title="' + x + '" >' + x + '<\/button>';
                        }
                    }
                }
 
                        
                if (currentpage != totalpages) {
                     
                    var nextPage = parseFloat(currentpage) + 1;
                    if (lastPage < totalpages) {
                       ) 
                        pagination += '<button type="button" name="' + totalpages + '" class="product_button" title="' + totalpages + '" >' + totalpages + '<\/button>';
                    }
                    pagination += '<button type="button" name="' + nextPage + '" class="product_button" title="Next►" >Next►<\/button>';
                }
                
                $('.product_pagination').html(pagination);
            } else {
                 
                $('.product_pagination').html('<button type="button" name="0" class="product_button_selected" title="1" >1<\/button>');
            }
            var offsetEnd = parseFloat(rowsPerPage) + parseFloat(offset);
            
 
             
            var cell = '<table border="0" cellpadding="2" cellspacing="0" width="100%" id="product_table">';
            cell = '<section class="main-content col-lg-9 col-md-9 col-sm-9">';
            cell = '<div class="row">';
            cell += '<tr>';
 
             
            var pageProducts = filterdProducts.slice(offset, offsetEnd);
             
            $.each(pageProducts, function (i, object) {
                    
                setPriceRange(parseFloat(object.price));
                countCellData++; // flug to know if there is content               
                
                 
                 
                cell += '<div class="col-lg-4-right col-md-4-right col-sm-4 product">';
                cell += '<div class="product-image"><img src="' + object.image + '" alt="' + object.title + '" title="' + object.title + '" longdesc="' + object.id + '" border="0" ><\/div>';
                cell += '<div class="product-info"><h5>' + object.title + '<\/h5><span class="price">' + object.price + '<\/span><\/div>';
                cell += '<div class="product-actions">';
                cell += '<span class="add-to-compare">';
                cell += '<span class="action-wrapper">';
                cell += '';
                cell += '<\/i>';
                cell += '<span class="action-name">مقایسه<\/span>';
                cell += '<\/span>';
                cell += '<\/span>';
                cell += '<\/div>';
                cell += '<\/div>';
                 
                 
                //cell += '<div><img src="'+object.image+'" alt="'+object.title+'" title="'+object.title+'" longdesc="'+object.id+'" border="0" ><\/div>';
                //cell += '<div>'+object.title+'<\/div>';
                //cell += '<div>'+object.price+'<\/div>';
                //cell += '<div>'+object.category+'<\/div>';
                 
 
                totalLoop--;
                loop++;
                 
 
                if (!totalLoop && loop) {
                    for (var i = 0; i < (maxColumn - loop) ; i++) {
                         
                        cell += '<td> <\/td>';
                    }
                }
               
 
                if (loop == maxColumn) {
                    cell += '<\/tr>';
                    loop = 0;
                    if (totalLoop) {
                        cell += '<tr>';
                    }
                }
            });
            cell += '<\/tr>';
            cell += '<\/div>';
            cell += '<\/section>';
            cell += '<\/table>';
            if (countCellData > 0) {
                // if exist content
                $('#product_show').html(cell);
                // set image onclick event
                $('#product_show img').click(function () {
                    alert('Product ID = ' + $(this).attr('longdesc'));
                });
 
            }
            setPagination();
        }
Posted
Comments
Anurag Gandhi 5-Dec-14 13:54pm    
Your question is not clear. Please elaborate it in a clear way.

1 solution

You have asked 3 times now. Already answered Read data from the database in jQuery[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900