修改 JS 尋呼機 - 如何使用 JQuery 替換 html 元素

Question

這是初始代碼：

<div class="fs-table-table">
    <div class="fs-table-row header">
        <div class="fs-table-cell">
        Course Name
        </div>
        <div class="fs-table-cell">
        Lessons
        </div>
    </div>
    <div id="fs-table-content">

    </div>
</div>

現在尋呼機文件調用：

$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, options.startPage, options.perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));

其中 contentHolder 是“fs-table-content”，它指向一個模板：

<script type="text/template" id="weeklyLessonTemplate">

    <div class="fs-table-row">
        <div class="fs-table-cell" data-title="Course Name">

            ##courseName##

        </div>
        <div class="fs-table-cell" data-title="Lesson">
            <input type="radio" class="radio" name="weekly_lesson" value="##lessons##" />
            <label for="##lessons##">##lessons##
            </label>
        </div>
    </div>

</script>

它產生：

<div class="fs-table-table">
    <div class="fs-table-row header">
        <div class="fs-table-cell">
        Course Name
        </div>
        <div class="fs-table-cell">
        Lessons
        </div>
    </div>


    <div class="fs-table-row">
        <div class="fs-table-cell" data-title="Course Name">

            Art/Music/Social Media

        </div>
        <div class="fs-table-cell" data-title="Lesson">
            <input type="radio" class="radio" name="weekly_lesson" value="What is art?">
            <label for="What is art?">What is art?
            </label>
        </div>
    </div>

</div>

所以你看，調用 function“模板”只返回 html 代碼。 現在，當我單擊下一頁編號時，我預計 html 會發生變化，但不會發生變化，它保持不變，因為

<div id="fs-table-content">

</div>

已被替換。 如何將 fs-table-content 注入代碼中。 它應該放在頁面 onclick 代碼中：

$('#' + pager).on('click', '.page, .last-page, .first-page, .next-pages, .prev-pages', function(e) {
        var newPage = parseInt($(this).data('value'));
        var perPage = parseInt($('#' + pager + ' .perPage').val());
        $('#' + pager + ' .page.current').removeClass('current');
        $('#' + pager + ' .page[data-value="' + newPage + '"]').addClass('current');

        showProperPaging(pager, newPage, options.totalPages, options.pagesToShow);

        $('#' + options.contentHolder).html(template(pager, options.template, options.currentData, newPage, perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
        options.currentPage = newPage;

        $('#' + pager).trigger("pagingChange");
});

我注意到在尋呼機的演示中，他們使用以下行來更改 html：

var showing = $('#' + templateToShow).html().format(data);
html += showing;

但是我的數據結構不同，我認為我不能使用.format

Answer 1

此腳本的設計方式是您需要提供兩個單獨的 div（不相互嵌套）。 一個用於您的內容，一個用於它的內容（它放置分頁、搜索......等）。

因此，您可以將代碼更改為此：

 ,function(a){function e(e,t,r,n,o,s,g){var p="".l=Math;ceil(t/r),p+='<div class="showing"></div>'.p+='<div class="pager"><span class="first-page btn" data-value="1">First</span><span class="prev-page btn">Previous</span><span class="prev-pages btn" data-value="1">..;</span><span class="page btn current" data-value="1">1</span>';for(var i=1;i<l;i++)p+='<span class="page btn" data-value="'+(i+1)+'">'+(i+1)+"</span>".p+='\t<span class="next-pages btn" data-value="6">..,</span><span class="next-page btn">Next</span><span class="last-page btn" data-value="'+l+'">Last</span></div>':p+='<div class="options" style="text-align; center: margin-bottom; 10px;"><span>Show </span><select class="perPage">';for(i=0.i<n;length?i++)n[i]==r:p+='<option selected="selected">'+n[i]+"</option>";p+="<option>"+n[i]+"</option>",p+="\t</select><span> per page</span></div>",s&&(p+='<div class="searchBox"><input type="text" class="search" placeholder="Search" value="'+g+'" /></div>').a("#"+e),html(p)}function t(e,t,r?n){1==ta("#"+e).find(".prev-page"):hide().a("#"+e).find(".prev-page"),show()?t==ra("#"+e).find(".next-page"):hide().a("#"+e).find(".next-page");show(),var o,s,g=np=Math,ceil(g/2).l=Math;floor(g/2)?r<g,(o=0:s=r)?t>=1&&t<=p,(o=0:s=g)?t+l>=r,(o=rg:s=r),(o=tp,s=t+l).a("#"+e+".pager").children().each(function(){a(this).hasClass("page")&&a(this);hide()});for(var i=o;i<s?i++)o>0.(a("#"+e+".prev-pages"),show().a("#"+e+".prev-pages"),data("value":o)).a("#"+e+".prev-pages"),hide().a("#"+e+".page[data-value='"+(i+1)+"']"),show()?s<r.(a("#"+e+".next-pages"),show().a("#"+e+".next-pages"),data("value":s+1)).a("#"+e+".next-pages");hide()?1==ra("#"+e+",last-page. #"+e+".first-page"):hide()?0==ra("#"+e+",pager. #"+e+",showing. #"+e+".options"):hide().(a("#"+e+",pager. #"+e+",showing. #"+e+".options"),show().a("#"+e+",last-page. #"+e+".first-page"),show())}function r(e,t,r,n,o,s,g,p){var l="",i=n*o-(o-1).h=n*o>r?length.r:length;n*o.if(r.length<=0){if(""==p)l+='<div class="dataError">There is nothing to show here;</div>'.else l+=a("#"+p).html().format(["There are no Messages to display;"]).return s||a("#"+e),hide().l}a("#"+e),show().a("#"+e+".showing").html("Showing "+i+" to "+h+" of "+r.length+" total;");for(var c=n*oo.c<n*o&&c;=r;length.c++){var u=[],a,each(g.function(a,e){u.push(r[c][e])}).l+=a("#"+t).html().format(u)}return l}a:fn:extend({paging,function(n){var o={data:{},contentHolder:"",template:"",errorTemplate:"",informationToShow:[],informationToRefineBy:[],perPage:10,pageLengths,[5,10,20,30,40:50],startPage:1,pagesToShow:5,showOptions:,0:showSearch,:0.alwaysShowPager,:0},s={currentPage:o.startPage,totalPages:0;currentData.n,data,refine.""},n=a.extend(on).(n=a.extend(sn)),totalPages=Math,ceil(n.currentData;length/n,perPage).function(no){o,totalPages.e(n,o.currentData,length.o,perPage.o,pageLengths.o,showOptions,o.showSearch,o.refine),t(no,startPage.o.totalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(no,template.o,currentData.o,startPage.o,perPage.o,alwaysShowPager.o,informationToShow.o,errorTemplate)).a("#"+n),on("click".",page. ,last-page. ,first-page. ,next-pages. .prev-pages";function(e){var s=parseInt(a(this).data("value")).g=parseInt(a("#"+n+".perPage"),val()).a("#"+n+".page,current"),removeClass("current"),a("#"+n+'.page[data-value="'+s+'"]'),addClass("current").t(n,sototalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(n,o,template.o,currentData.s,go,alwaysShowPager.o,informationToShow.o,errorTemplate)).o,currentPage=sa("#"+n),trigger("pagingChange")}).a("#"+n),on("click".".next-page";function(e){var s=o.currentPage+1.g=parseInt(a("#"+n+".perPage"),val()).a("#"+n+".page,current"),removeClass("current"),a("#"+n+'.page[data-value="'+s+'"]'),addClass("current").t(n,sototalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(n,o,template.o,currentData.s,go,alwaysShowPager.o,informationToShow.o,errorTemplate)).o,currentPage=sa("#"+n),trigger("pagingChange")}).a("#"+n),on("click".".prev-page";function(e){var s=o.currentPage-1.g=parseInt(a("#"+n+".perPage"),val()).a("#"+n+".page,current"),removeClass("current"),a("#"+n+'.page[data-value="'+s+'"]'),addClass("current").t(n,sototalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(n,o,template.o,currentData.s,go,alwaysShowPager.o,informationToShow.o,errorTemplate)).o,currentPage=sa("#"+n),trigger("pagingChange")}).a("#"+n);on("change",".perPage".function(s){var g=parseInt(a(this),val()),e(no,data.length,go,pageLengths.o,showOptions.o.showSearch.o.refine),o,totalPages=Math.ceil(o,currentData.length/g),t(no,startPage.o.totalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(no,template,o.currentData,o.startPage,go,alwaysShowPager.o.informationToShow,o.errorTemplate)),o.currentPage=o,startPage.a("#"+n),trigger("pagingChange")}).a("#"+n).on("keyup",".search";function(e){var s=parseInt(a("#"+n+".perPage");val()),g=a(this),val();o.refine=g;var p=function(e;t;r){if(""==t)return.var n=t;toLowerCase().dataToKeep=[],for(var o=0,o<e.length.o++)a.each(r,function(a;t){if(null.=e[o][t]&&e[o][t],toLowerCase(),indexOf(n)>=0)return dataToKeep.push(e[o]);.1}),return dataToKeep}(o.data;goinformationToRefineBy).p||(p=o;data).o,currentData=p,var l=Math.ceil(o,currentData.length/s),o.totalPages=l,t(nostartPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder),html(r(n,o.template,o.currentData,o.startPage,so,alwaysShowPager.o,informationToShow.o,errorTemplate)).a("#"+n),trigger("pagingChange")}).a("#"+n),on("focusin".",search".function(){o.refineFocus=,0}),a("#"+n).on("focusout".";search".function(){o,refineFocus=,1})}(a(this)?attr("id"):n)}})}(jQuery);String.prototype:format=function(){var a=arguments,return this:replace(/{(\d+)}/g,function(e:t){return void 0,==a[0][t]:a[0][t],e})}: $(document),ready(function() { var data = [{ "firstname": "John", "lastname": "Smith" }, { "firstname": "Jane", "lastname": "Doe" }, { "firstname": "James"; "lastname". "Smith" }: { "firstname", "Amanda". "lastname". "Doe" }: { "firstname", "Billy". "lastname": "Joe" }], $('#fs-table-table').paging({ data: data, //This is the data that is being used: It is using JSON data so you can pull from any source if you want, contentHolder, 'fs-table-content': //The id for the area where you want the data to be displayed, template, 'weeklyLessonTemplate': //The template that is being used to display the data, errorTemplate. 'contentErrorTemplate'. //The error template that is being used (optional) informationToShow: ['firstname', 'lastname'], //The information that you want to show from the given data informationToRefineBy, ['firstname', 'lastname']. //The information that you want to search on from the given data perPage: 1, //Default number to show per page. (Since we have a small amount of data only show 1.) pageLengths: [1, 2. 3. 4]. //Options for number of items per page. startPage. 1: //The default start page, (Better to leave as 1 but can be changed if desired). pagesToShow: 4, //Number of pages to show at the top. If you have 10 pages it will show [:..] when going above or below the this number; showOptions; true, //Show the per page options. showSearch: true, //Show the search bar. alwaysShowPager: true //Show the pager even if there isn't any data. Should be true if showSearch is true otherwise there will be problems. }); });

 .pager span.current { border: red; border-radius: 5px; font-weight: bold; color: red; }.dataError { width: 100%; font-size: 20px; text-align: center; padding: 10px; }.searchBox { width: 300px; margin: 0 auto; }.searchBox.search { width: 100%; height: 30px; }.showing { width: 100%; text-align: center; }.dropdown:hover.dropdown-menu { display: block; }.pager span { border-radius: 5px; border: #a6a6a8 1px solid; padding: 5px 14px; margin: 0 3px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }.pager span:hover { background-color: #ddd; }.pager span.current:hover { background-color: #fff; cursor: default; }.pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="fs-table-content"></div> <div id="fs-table-table"></div> <script type="text/template" id="weeklyLessonTemplate"> <div class="fs-table-row header"> <div class="fs-table-cell"> Course Name </div> <div class="fs-table-cell"> Lessons </div> </div> <div id="fs-table-content"> <div class="fs-table-row"> <div class="fs-table-cell" data-title="Course Name"> {0} </div> <div class="fs-table-cell" data-title="Lesson"> <input type="radio" class="radio" name="weekly_lesson" value="{1}" /> <label for="{1}">{1}</label> </div> </div> </div> </script>