时间戳

首页 > 解决方案 > 修改 JS 寻呼机 - 如何使用 JQuery 替换 html 元素

javascript - 修改 JS 寻呼机 - 如何使用 JQuery 替换 html 元素

问题描述

这是初始代码：

<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>

所以你看，调用函数“模板”只是返回 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

标签： javascriptjquerypagination

解决方案

此脚本的设计方式是您需要提供两个单独的 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==t?a("#"+e).find(".prev-page").hide():a("#"+e).find(".prev-page").show(),t==r?a("#"+e).find(".next-page").hide():a("#"+e).find(".next-page").show();var o,s,g=n,p=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=r-g,s=r):(o=t-p,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==r?a("#"+e+" .last-page, #"+e+" .first-page").hide():0==r?a("#"+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*o-o;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(o,n),(n=a.extend(s,n)).totalPages=Math.ceil(n.currentData.length/n.perPage),function(n,o){o.totalPages;e(n,o.currentData.length,o.perPage,o.pageLengths,o.showOptions,o.showSearch,o.refine),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.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,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+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,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+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,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("change",".perPage",function(s){var g=parseInt(a(this).val());e(n,o.data.length,g,o.pageLengths,o.showOptions,o.showSearch,o.refine),o.totalPages=Math.ceil(o.currentData.length/g),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,g,o.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,g,o.informationToRefineBy);p||(p=o.data),o.currentData=p;var l=Math.ceil(o.currentData.length/s);o.totalPages=l,t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,s,o.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>

推荐阅读