How to use jquery template js

来源：互联网发布：球球大作战php源码编辑：程序博客网时间：2024/06/05 23:04

/*****by Jiangong SUN*****/

Jquery template can help generate code in the same format. It's like repeater control in asp.net.

html div:

<head><script src="http://code.jquery.com/jquery-latest.min.js"></script><script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script></head><body><div id="pages"><div class="results-wrapper"><ul class="pagination"></ul></div></div></body>

JS template: Template

<script id="dealerTemplate" type="text/x-jquery-tmpl">    <li>    <span class="name">${Name}</span>    <span class="address">${Address}<br />${ZipCode} ${City}</span>    <span class="btn_fiche">    <a href="#" id="box_${index}">       <%=Labels[LABELS.FO_DEALERLOCATOR_DETAILS]%>    </a>     </span>    <span class="btn_select">    <a href="#" id="box_${index}_select">       <%=Labels[LABELS.FO_DEALERLOCATOR_SELECT]%>    </a>    </span></script>

AJAX usage:

function loadDealers(search, page, itemsByPage) {    var params = "{'page':'" + page + "', 'itemsByPage':'" + itemsByPage + "', 'searchString':'" + search + "'}";    var selectedPage = page;    $("ul.pagination").empty();    var loader = "<img src='" + globalVars.brandRootPath + "/styles/images/general/ajax-loader.gif' />";    $("ul.companies").html(loader);    $("span.results").text("");    ajaxCallDealers(params, function(data) {        var dealers = data.d.Dealers;        var count = data.d.Count;        var pagesNb = data.d.PagesNb;        var page = data.d.Page;        $("span.results").html(count + " " + globalVars.labels['FO_DEALERLOCATOR_RESULTCOUNT']);        datas = {}; // to remove previous markers        $.each(dealers, function(i, dealer) {            dealer.index = i;            datas[i] = {                dealerId: dealer.Id,                marker: { lat: dealer.Latitude, lng: dealer.Longitude },                infobox: {                    name: dealer.Name, address: dealer.Address + '<br />' + dealer.ZipCode + ' ' + dealer.City,                    tel: dealer.PhoneNumber, fax: dealer.FaxNumber, email: dealer.Email, services: [1], link: dealer.WebSite,                    open: dealer.OpenHours,                    select: { link: '', text: globalVars.labels['FO_DEALERLOCATOR_SELECT'], rel: 'box_' + i + '_select' }                }            };        });        $("ul.companies").empty();        $("#dealerTemplate").tmpl(dealers).appendTo("ul.companies");        $("ul.companies").fadeIn('slow');        //setLatLong();        SetMarkers();        var last = pagesNb - 1;        for (i = 0; i < pagesNb; i++) {            var activeClass = ((i == page) ? 'active' : '');   // add active class if current page            var lastClass = ((i == last) ? 'last' : '');      // add last class if last page            var currentClass = ((i == page) ? 'current' : ''); // add current class if current page            var pageNumber = i + 1;            var pageLink = '<li class="' + activeClass + ' ' + lastClass + '"><a class="' + currentClass + '">' + pageNumber + '</a></li>';            $("ul.pagination").append(pageLink);        }        $('div#pages ul.pagination a').each(function(index) {            $(this).click(function() {                var search = $('input#search-zipcode').val();                loadDealers(search, index, 2);            });        });        $('div#pages ul.pagination li').each(function(index) {            $(this).click(function() {                var search = $('input#search-zipcode').val();                loadDealers(search, index, 2);            });        })    });}

ajax method:

function ajaxCallDealers(param, callback, errorHandler) {    var options = {        type: "POST",        url: globalVars.loadDealersUrl,        data: param || "{}",        contentType: "application/json; charset=utf-8",        dataType: "json",        success: callback,        error: errorHandler || function() { }    };    $.ajax(options);}

Hope this can help ! Enjoy coding!