本文介绍了JQuery数据库连接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
产品代码位于jQuery数组中。现在我想做的是从数据库中读取数据？
The product codes are in an array of jQuery. Now I want to do was read the data from the database?
// start user setings
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;
// empty content
$('#product_show').html(' ');
// set select boxes to there selected as the var value
$('#product_order').val(sortOrder);
$('#product_sort').val(sortBy);
var filterdProducts = []; // displayed products array
var key = 0;
// if needed price range filter
if (!minPrice && !maxPrice) {
filterdProducts = products;
} else {
$.each(products, function (i, object) {
var curentPrice = parseFloat(object.price);
var priceMinOk = true;
var priceMaxOk = true;
// filter results match the price range
if (maxPrice || minPrice) {
if (maxPrice && maxPrice < curentPrice) {
priceMaxOk = false;
}
if (minPrice && minPrice > curentPrice) {
priceMinOk = false;
}
}
// loop over list and get only related to new array
if (priceMinOk && priceMaxOk) {
filterdProducts[key] = object;
key++;
}
});
}
// get the amount of results
var totalResults = filterdProducts.length;
if (totalResults > 0) {
// if there are results - set selected order
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;
}
});
}
// show the amount of results
$('.product_results').html(totalResults);
/****** start build pagination links ******/
var totalpages = Math.ceil(totalResults / rowsPerPage); // calculate the total pages
if (totalpages > 1) {
// fix displayed page number if its biger then exist
if (currentpage > totalpages) {
// set current page to last page
currentpage = totalpages;
}
// set the offset of the list, based on current page
offset = (currentpage - 1) * rowsPerPage;
var pagination = '';
var lastPage = 0;
// set the min page of the list, based on the range
var minPage = parseFloat(currentpage) - parseFloat(range);
minPage = minPage > 0 ? minPage : 1;
// if not page 1, don't show back links
if (currentpage > 1) {
// get previous page num
pagination += '<button type="button" name="' + (currentpage - 1) + '" class="product_button" title="◄Previous" >◄Previous<\/button>';
// show page 1 only if the min page isn`t page 1 (prevent page 1 to show twice)
if (minPage > 1) {
pagination += '<button type="button" name="1" class="product_button" title="1" >1<\/button>';
}
}
// loop to show links to range of pages around current page
for (var x = minPage; x <= (currentpage + range) ; x++) {
// validate page number
if (x <= totalpages) {
lastPage = x;
// if this is current page set its value to 0 (prevent click) and set class as selected
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 not on last page, show forward and last page links
if (currentpage != totalpages) {
// get next page
var nextPage = parseFloat(currentpage) + 1;
if (lastPage < totalpages) {
// show page last page only if the min page isn`t last page (prevent page 1 to show twice)
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>';
}
// update the html
$('.product_pagination').html(pagination);
} else {
// if no pages or just one page dont show pagination
$('.product_pagination').html('<button type="button" name="0" class="product_button_selected" title="1" >1<\/button>');
}
var offsetEnd = parseFloat(rowsPerPage) + parseFloat(offset);
/****** end build pagination links ******/
// build cells content
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>';
// get the keys is in the display pagination range
var pageProducts = filterdProducts.slice(offset, offsetEnd);
// loop over the query list
$.each(pageProducts, function (i, object) {
// get min and max price range for price range filter slider
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 the row ended but the table as unmach cells number
if (!totalLoop && loop) {
for (var i = 0; i < (maxColumn - loop) ; i++) {
// add empty cell
cell += '<td> <\/td>';
}
}
// determine if the row ended
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();
}
推荐答案
这篇关于JQuery数据库连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！