<div class="hls_page">
    <div class="hls_page_title">
        <div class="hls_page_title_left">
            <img src="${titleImg!}" alt="png"/>
        </div>
        <div class="hls_page_title_left" style="margin-top:9px;margin-left:5px;">
            <span>${title!}</span>
        </div>
        <div class="hls_page_title_right">
            <img id="${titleQueryId!}" src="${contextPath!}/resources/images/CONT/search_flag.png" alt="png"/>
        </div>
        <div class="hls_page_title_right">
            <img id="${titleAddId!}" src="${contextPath!}/resources/images/CSH/add.png" alt="png"/>
        </div>
        <div class="hls_page_title_right">
            <img id="${titleSearchId!}" src="${contextPath!}/resources/images/CONT/search.png" alt="png"/>
            <input type="text" id="${titleSearchInputId!}" placeholder="${inputPlaceholder!}"
                   class="search-style"/>
        </div>
    </div>
    <div id="${id}"   class="hls_page_body ${hlsClassName!}"  <#if style??> style="${style!}" </#if> >
    </div>
    <div class="hls_page_foot">
        <div class="hls_page_foot_contain">
                <img id="hls_page_img_last" src="${contextPath!}/resources/images/CONT/last2.png" alt="png"/>
                <img id="hls_page_img_next" src="${contextPath!}/resources/images/CONT/next1.png" alt="png"/>
        </div>
    </div>
</div>
<script>
    var ${id} = new hlsPage();
    ${id}.hlsFeildsSetting(${config!});
    ${hlsDataSource}.fetch(function(datas){
         ${id}.config({
            id: "${id}",
            pageSize:${pageSize!3},
            dataSourse: datas
        });
    });


    $("#${titleSearchId!}").on("click", function (e) {
        e.preventDefault();
        if (!$("#${titleSearchInputId!}").val().trim()) {
            $(this).next().animate({
                width: 'toggle'
            }, 800);
        }
    });

    ${id}.configButton({
        lastPageButton:{
            id: "hls_page_img_last",
            callback: function (pageInfo) {
                if(pageInfo.lastFlag == false){
                    $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/last.png");
                }
                else{
                    $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/lastCan.png");
                }
                if(pageInfo.nextFlag == true) {
                    $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/next.png");
                }
                else{
                    $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/nextNot.png");
                }
            }
        },
        nextPageButton:{
            id:"hls_page_img_next",
            callback:function (pageInfo) {
                if(pageInfo.lastFlag == false){
                    $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/last.png");
                }
                else{
                    $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/lastCan.png");
                }
                if(pageInfo.nextFlag == true) {
                    $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/next.png");
                }
                else{
                    $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/nextNot.png");
                }
            }
        }
    });
    ${id}.startPageEvent(function(pageInfo){
        if(pageInfo.lastFlag == false){
            $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/last.png");
        }
        else{
            $("#hls_page_img_last").attr("src","${contextPath!}/resources/images/CSH/lastCan.png");
        }
        if(pageInfo.nextFlag == true) {
            $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/next.png");
        }
        else{
            $("#hls_page_img_next").attr("src","${contextPath!}/resources/images/CSH/nextNot.png");
        }
    });

</script>