How to use jquery template js

最新推荐文章于 2018-06-12 16:14:26 发布

garcon1986

最新推荐文章于 2018-06-12 16:14:26 发布

阅读量4k

点赞数

分类专栏： jQuery 文章标签： jquery function class search callback ajax

本文链接：https://blog.csdn.net/garcon1986/article/details/7490014

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

/*****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!

garcon1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
How to use jquery template js

/*****by Jiangong SUN*****/Jquery template can help generate code in the same format. It's like repeater control in asp.net.html div: JS template: Template
复制链接

扫一扫

专栏目录