dandelion / dandelion-datatables

Dandelion component for DataTables
http://dandelion.github.io/components/datatables/
Other
110 stars 49 forks source link

Bootstrap pagination type class #237

Closed vlapo closed 10 years ago

vlapo commented 10 years ago

Hi folks,

I have problem with bootstrap pagination type.

<table id="taskList" dt:table="true" 
    dt:filter="false" 
    dt:serverside="true" 
    dt:url="@{/project/ajax/tasks}" 
    dt:lengthChange="false"
    dt:paginationtype="bootstrap"
    class="table table-bordered sortableTable responsive-table tablesorter tablesorter-default">
<!-- ..... -->

selection_005

<div class="dataTables_paginate paging_bootstrap pagination">
    <ul>
        <li class="prev disabled"><a href="#">← Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="next disabled"><a href="#">Next → </a></li>
    </ul>
</div>

So, I find little bug with bootstrap pagination class. This class have to present in "ul" html element (not parent div).

After my modification: selection_006

<div class="dataTables_paginate paging_bootstrap">
    <ul class="pagination">
        <li class="prev disabled"><a href="#">← Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="next disabled"><a href="#">Next → </a></li>
    </ul>
</div>

Same issue with dt:paginationtype bootstra_four_button and bootstrap_full_numbers.

My little bit investigation :): https://github.com/dandelion/dandelion-datatables/blob/master/datatables-core/src/main/resources/datatables/features/paginationType/bootstrap.js#L27 https://github.com/dandelion/dandelion-datatables/blob/master/datatables-core/src/main/resources/datatables/features/paginationType/bootstrap_four_button.js#L26 https://github.com/dandelion/dandelion-datatables/blob/master/datatables-core/src/main/resources/datatables/features/paginationType/bootstrap_full_numbers.js#L26

tduchateau commented 10 years ago

Hi,

What happens if you explicitly activate the Bootstrap2 theme?

<table id="taskList" dt:table="true" 
    dt:filter="false" 
    dt:serverside="true" 
    dt:url="@{/project/ajax/tasks}" 
    dt:lengthChange="false"
    dt:paginationtype="bootstrap"
    dt:theme="bootstrap2" <===========
    class="table table-bordered sortableTable responsive-table tablesorter tablesorter-default">
<!-- ..... -->
vlapo commented 10 years ago

Nothing. Same behavior. Maybe I dont have any settings done ?

tduchateau commented 10 years ago

You don't need more settings. Let me try to reproduce it and I get back to you.

tduchateau commented 10 years ago

Unfortunately I can't reproduce it using the latest snapshot. Can you confirm that the bootstrap-pagination js file is present in your page?

vlapo commented 10 years ago

I see only paginationtypebootstrap.js ... btw maybe I have problem with my custom template :/ This template implements some customization of bootstrap tables.

But when I comment all sources from template I dont see any changes.

vlapo commented 10 years ago

oh. My fault. New update of template comming with bootstrap3 and it isnt supported yet. :/ I am sorry.

tduchateau commented 10 years ago

Note that waiting for Dandelion Core 0.10.0 to be released, I'll focus on this one for Dandelion-Datatables 0.10.0 since support for Bootstrap3 is added. Thanks!