eisenbraun / columns

A jQuery plugin that converts JSON data into searchable, sortable, HTML tables
http://eisenbraun.github.io/columns
MIT License
104 stars 47 forks source link

Set and remove paging using jquery on the fly #5

Closed akk001 closed 5 years ago

akk001 commented 9 years ago

First of all thanks for the great library and the support I got from you in my previous post.

What I would like to do is apply paging and removing paging using jquery.

Just for try I tried this.

$('#ui-table-data').columns('paginating ', true);

where "ui-table-data" is the ID of the html table created by the library

(obviously I added this ID to get hold of the table in the library file ).

Please let me know how the above can be achieved using jquery or any other way at client side.

Regards

Anees khan.

eisenbraun commented 9 years ago

If I am understanding your question correctly, yes there is a way to do this. Unfortunately, the default template of the current version of Columns is not set up to handle this properly, so it a bit more involved than it should be.

First you will want to create a new Mustache template. You can base it off the default.mst and replace the Columns Controls with this:

<div class="ui-table-footer">
    <span class="ui-table-size"></span> 
    <span class="ui-table-results">Results:
    <strong>{{tableTotal}}</strong>
    </span> 
    <span class="ui-table-controls"></span>
</div>

Below is the code for the two states Paginating and Not Paginating

// Not Paginating 
$('#ui-table-data').columns('destory');
$('#ui-table-data').columns({
    data: data,
    paginating: false,
    templateFile: 'template/no-paging.mst' //path to your custom template 
});

// Paginating
$('#ui-table-data').columns('destory');
$('#ui-table-data').columns({
    data: data,
});

I will make this a much easier process in future version, but for now, this should work.

Please let me know if you have any questions.

Thanks, Michael