Read data from the database jQuery and asp.net

See more:

ASP.NET

jQuery

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؟

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();
        }