Click here to Skip to main content
15,896,111 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
How can I read data from the database and put in my jQuery?
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

1 solution

First, you need to have a webmethod in C# that you can call that will access with the database and return the results. Since JavaScript runs on the client computer you can't get direct access to it with JavaScript.

Then, once you have a webmethod you then use jQuery's .ajax method, http://api.jquery.com/category/ajax/[^] to call your webservice.

Many examples online if you get stuck.
 
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