javascript - 我一直在尝试使用分页构建一个 dc.js 数据表。如何修复 'Pagination for dc.table'？

Question

我正在尝试向 dc.datatable 添加分页。

分页不工作，不显示页面。

使用这段代码，整个数据表都会显示出来，只有表末尾的“下一个”和“上一个”按钮，但这些按钮不起作用。

如何修复一页显示 20 行的分页？

我的代码

 <div class="chart col-sm-12" id="all-characters-div">
            <div class="content-wrapper">
                <h2>Comic Characters</h2>
                <table id="all-characters"> </table>
            </div>
        </div>
        <div id="pagination">
            <span id="start"></span>-<span id="end"></span> of <span id="totalSize"></span>
            <button id="prev" class="btn" onclick="prev()">Prev</button>
            <button id="next" class="btn" onclick="next()">Next</button>
        </div>

function makeGraphs(error, charactersData) {
    var ndx = crossfilter(charactersData);

show_listCharacters(ndx);
       updateResult();
         dc.renderAll();

 function show_listCharacters(ndx) {  
   var dataTable = dc.dataTable("#all-characters");

   var dim = ndx.dimension(dc.pluck("name"));
 // console.log(dim.top(Infinity));
       dataTable
      .dimension(dim)
      .group(function(d) {
        return "";
      })
      .columns(["name", "urlslug", "first appearance"])
      .size(Infinity)
      .sortBy(dc.pluck("name")) 
      .order(d3.ascending)
      .transitionDuration(1000);
       }
  /*-----------------Table Pagination-----------*/
          var resultStart = 0; var resultEnd =21;
          var ndx;
          var dataTable = dc.dataTable;

          function displayResult() {

            document.getElementById("start").innerHTML = resultStart;
            document.getElementById("end").innerHTML = resultStart + resultEnd-1;

            document.getElementById("totalSize").innerHTML = ndx.size();


            d3.select('#prev').attr('disabled', resultStart-resultEnd < 0 ? 'true' : null);
            d3.select('#next').attr('disabled', resultStart+resultEnd >= ndx.size() ? 'true' : null);
        }
          function updateResult() {

            dataTable.beginSlice(resultStart);
            dataTable.endSlice(resultStart + resultEnd);
            displayResult();

        }
        function prev() {
          resultStart -= resultEnd;
          updateResult();
          dataTable.redraw();
        }
          function next() {
            resultStart += resultEnd;
            updateResult();
            dataTable.redraw();
        }

Answer 1

看看这个项目中的代码:https://tttp.eu我有分页和可排序列

相关部分

 function drawPagination(){

  var ofs = 0, pag = 10;
  chart.on('preRedraw.pagination', display);

  function display() {
      d3.select('#begin')
          .text(1+ofs);
      d3.select('#end')
          .text(ofs+pag);
      d3.selectAll('#next,#last')
          .attr('disabled', ofs+pag>=graphs.total.data() ? 'true' : null);
      d3.selectAll('#first,#prev')
          .attr('disabled', ofs<=0 ? 'true' : null);
      d3.select('#size').text(graphs.total.data());
  }

  function update() {
      chart.beginSlice(ofs);
      chart.endSlice(ofs+pag);
      chart.redraw();
  }

  function next() {
      ofs += pag;update();
  }
  function prev() {
      ofs -= pag;
      if (ofs <=0) {
        d3.selectAll("#prev,#first").attr("disabled",true);
        ofs=0;
      }
      update();
  }

  d3.selectAll("#pagination")
    .html (`
        Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span><span class="btn-group">
        <button id="first" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-fast-backward"></i>First</button>
        <button id="prev" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-step-backward"></i>Prev</button>
        <button id="next" class="btn btn-primary">Next<i class="glyphicon glyphicon-step-forward"></i></button>
        <button id="last" class="btn btn-primary">Last<i class="glyphicon glyphicon-fast-forward"></i></button>
        </span>
    `);
  d3.select("#first").on("click",function(){ofs=0;update()});
  d3.select("#last").on("click",function(){ofs=graphs.total.data()-pag;update()});
  d3.select("#prev").on("click",prev);
  d3.select("#next").on("click",function(){ofs +=pag;update()});

  update();
}