Table pagination is not working when first time data load

[Sadi]

I am using this example

https://dc-js.github.io/dc.js/examples/table-pagination.html

My data table values not shows 0-5 first time but after clicking next button displays 6-11 values and by clicking last button displays 0-5 values?

what i am doing wrong? Also gives me an error of Uncaught TypeError: Cannot read property 'domain' of undefined

Here is my code:

<table id="test"></table>

  <div id="paging">

    Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span>.

    <input id="last" class="btn" type="Button" value="Last" onclick="javascript:last()" />

    <input id="next" class="btn" type="button" value="Next" onclick="javascript:next()"/>

  </div>

var chart = dc.dataTable("#test");

var ndx = crossfilter(csv),

tableDimension    = ndx.dimension(function(d) {return new Date(d.date);}),

        grouping = function (d) { return new Date(d.date);};

chart

        .width(768)

        .height(480)

        .dimension(tableDimension)

        .group(grouping)

        .size(Infinity)

        .columns(['date','Day of Week','Hour', 'title'])

            .order(d3.ascending);

    update();

    chart.render();

  // use odd page size to show the effect better

  var ofs = 0, pag = 5;

  function display() {

      d3.select('#begin')

          .text(ofs);

      d3.select('#end')

          .text(ofs+pag-1);

      d3.select('#last')

          .attr('disabled', ofs-pag<0 ? 'true' : null);

      d3.select('#next')

          .attr('disabled', ofs+pag>=ndx.size() ? 'true' : null);

      d3.select('#size').text(ndx.size());

  }

  function update() {

      chart.beginSlice(ofs);

      chart.endSlice(ofs+pag);

      display();

  }

  function next() {

      ofs += pag;

      update();

      chart.redraw();

  }

  function last() {

      ofs -= pag;

      update();

      chart.redraw();

  }