Dynatable - records are appended to previous list each time the page number is changed

Question

I'm trying to use Dynatable to create stylized list of records from local json dataset. in Dynatable documantions, the example of stylized list is using Reader function to get records from DOM, and use Writer to generate the records in page. I just need to use local dataset instead of Reader function. here is what is wrote:

     var localJSON = '[{  "caption": "<div>myCaption1</div>", "thumbnail": " <img src=\'../images/test.jpg\' />" },'
                     +'{  "caption": "<div>myCaption1</div>", "thumbnail": " <img src=\'../images/test.jpg\' />" }, '
                     +'{  "caption": "<div>myCaption1</div>", "thumbnail": " <img src=\'../images/test.jpg\' />" }, '
                     +'{  "caption": "<div>myCaption1</div>", "thumbnail": " <img src=\'../images/test.jpg\' />" }] ';
     var records = JSON.parse(localJSON);
     function ulWriter(rowIndex, record, columns, cellWriter) {
         var li = '';
         var cssClass = "col-sm-3";
         if (rowIndex % 4 === 0) { cssClass += ' first'; }
         li = '<li class="' + cssClass + '"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div>' + record.caption + '</div></li>';
         return li;
     }
     $('#sampleUIList').dynatable({
        dataset: {
              perPageDefault: 4,
              records: records 
          },
          writers: {
              _rowWriter: ulWriter
          }
     });

the problem is every time i try to change the page number, or change the perPageOptions, the whole dataset (localJSON) is appending to the previous one (something like += on records ). Did I miss anything?

score 1 · Answer 1 · answered Sep 15 '14 at 23:51

You are missing the following configuration parameter:

  table: {
     bodyRowSelector: 'li'
  },

Adding this to your config so it looks like:

$('#sampleUIList').dynatable({
   dataset: {
         perPageDefault: 4,
         records: records 
     },
     writers: {
         _rowWriter: ulWriter
     },
     table: {
       bodyRowSelector: 'li'
     }
});

Should do the trick.

Dynatable - records are appended to previous list each time the page number is changed

1 Answers1