Two Tables one responsively paginated one not

wbyers

Does anyone now how to resolve this: I'm working on a page with two tables on it. One works perfectly. and the other never paginates or even changes with the pagination dropdown. They have the same starting settings so why is one an issue and the other not?

kthorngren

Would need to see your code. Here is an example of multiple tables on a page.

Kevin

wbyers

Will you accept a snapshot of it. or would you prefer quoted code?:
"

<

div class="content content-boxed">

<!-- Dynamic Table Full -->
<div class="block">
    <div class="block-header">
        <h3 class="block-title">Programs - Dynamic Table <small>Full</small></h3>
    </div>
    <div class="block-content">
        <!-- DataTables init on table by adding .js-dataTable-full class, functionality initialized in js/pages/base_tables_datatables.js -->
        <table id="programs" class="table table-condensed" style="font-size:12px">
            <thead>
                <tr>
                    <th class="text-center" style="width: 10%;">SKU</th>
                    <th>Program</th>
                    <th class="hidden-xs">Location</th>
                    <th class="hidden-xs" style="width: 15%;">Starts</th>
                    <th class="hidden-xs" style="width: 15%;">Ends</th>
                    <!--
                    <th class="hidden-xs" style="width: 15%;">Status</th>
                    -->
                    <th class="text-center" style="width: 10%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php $i = 1; ?>
                <?php foreach($programs['data'] as $program) { ?>
                <tr>
                    <td class="text-center"><?php echo $program['sku']; ?>
                    <td><?=$program['program'];?></td>
                    <td class="hidden-xs"><?=$program['site'];?>,<?=$program['city'];?> <?=$program['zip'];?></td>
                    <td><?=$program['startDate'];?></td>
                    <td><?=$program['endDate'];?></td>
                    <!--
                    <td class="hidden-xs">
                        <?php $one->get_label(); ?>
                    </td>
                    -->
                    <td class="text-center">
                        <div class="btn-group">
                            <button class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Edit Client"><i class="fa fa-pencil"></i></button>
                            <button class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Remove Client"><i class="fa fa-times"></i></button>
                        </div>
                    </td>
                </tr>
                <?php } ?>
            </tbody>
        </table>
    </div>
</div>
<!-- END Dynamic Table Full -->


<!-- Table Sections (.js-table-sections class is initialized in App() -> uiHelperTableToolsSections()) -->
<div class="block">
    <div class="block-content">
        <!--
        Separate your table content with multiple tbody sections. Add one row and add the class .js-table-sections-header to a
        tbody section to make it clickable. It will then toggle the next tbody section which can have multiple rows. Eg:

        <tbody class="js-table-sections-header">One row</tbody>
        <tbody>Multiple rows</tbody>
        <tbody class="js-table-sections-header">One row</tbody>
        <tbody>Multiple rows</tbody>
        <tbody class="js-table-sections-header">One row</tbody>
        <tbody>Multiple rows</tbody>

        You can also add the class .open in your tbody.js-table-sections-header to make the next tbody section visible by default
        -->
        <table id="programs2" class="js-table-sections js-table-checkable table table-condensed" style="font-size:14px">
            <thead>
                <tr>
                    <th style="width: 30px;"></th>
                    <th class="text-center" style="width: 70px;">
                        <label class="css-input css-checkbox css-checkbox-primary remove-margin-t remove-margin-b">
                            <input type="checkbox" id="check-all" name="check-all"><span></span>
                        </label>
                    </th>
                    <th style="width: 30px;">SKU</th>
                    <th>Name</th>
                    <th style="width: 15%;">Status</th>
                    <th class="hidden-xs" style="width: 15%;">Date</th>
                </tr>
            </thead>

            <?php $i = 1; ?>
            <?php foreach($programs['data'] as $program) { ?>
            <tbody class="js-table-sections-header<?php // if ($i == 1) { echo ' open'; } ?>">
                <tr>
                    <td class="text-center">
                        <i class="fa fa-angle-right"></i>
                    </td>
                  <td class="text-center">
                        <label class="css-input css-checkbox css-checkbox-primary">
                            <input type="checkbox" id="row_<?php echo $i; ?>" name="row_<?php echo $i; ?>"><span></span>
                        </label>
                    </td>
                    <td><?php echo $program['sku']; ?></td>
                    <td class="font-w600"><?php echo $program['program']; ?></td>
                    <td>
                        <?php $one->get_label(); ?>
                    </td>
                    <td class="hidden-xs">
                        <em class="text-muted"><?php echo $program['startDate']; ?> <?php echo $program['startTime']; ?></em>
                    </td>
                </tr>
            </tbody>
            <tbody>
                <?php for ($j = 1; $j < 5; $j++) { ?>
                <tr>
                    <td class="text-center"></td>
                    <td class="font-w600 text-success">+ $<?php echo rand(10, 100); ?>,00</td>
                    <td>
                        <small>Paypal</small>
                    </td>
                    <td class="hidden-xs">
                        <small class="text-muted">June <?php echo rand(1, 28); ?>, 2015 12:16</small>
                    </td>
                </tr>
                <?php } ?>
            </tbody>
            <?php } ?>
        </table>
    </div>
</div>
<!-- END Table Sections -->

And the initialization javascript for both is $(document).ready(function() { <script> $('#programs').DataTable( { "lengthMenu": [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]] } ); } ); $(document).ready(function() { $('#programs2').DataTable( { "lengthMenu": [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]] } ); } ); </script>

kthorngren

The best option is to link to a page showing the issue. If you can't provide a link to your page then maybe you can copy the relevant pieces into http://live.datatables.net/ or https://jsfiddle.net/ for troubleshooting.

If you can't do any of those then paste the code into the thread using triple back ticks (```) around the code as noted just below the "post Comment" button.

Kevin

wbyers

Also the page is: http://usasportgroup.com/dev/admin/usg-teamtraining.php

tangerine

Your second table has two < tbody > sections. DataTables doesn't accept that.

wbyers

okay, thanks. would you have any recommendations?

kthorngren

Your loop PHP file is creating the multiple tbody tags:

        <table id="programs2" class="js-table-sections js-table-checkable table table-condensed" style="font-size:14px">
.....
            <tbody class="js-table-sections-header<?php // if ($i == 1) { echo ' open'; } ?>">
                <tr>
                    <td class="text-center">
.....
                </tr>
            </tbody>
            <tbody>
                <?php for ($j = 1; $j < 5; $j++) { ?>
                <tr>
.....
                </tr>
                <?php } ?>
            </tbody>

I don't know much about PHP but you need to change the loop building program2.

Kevin

wbyers

So like tangerine said, Datatables doesn't handle multiple body tags? Can I get away with just using two if I change the loop? is there any way that datatables can be made to handle a double body table?

kthorngren

This post is a couple years old but according to Allan multiple tbody tags are not supported:
https://datatables.net/forums/discussion/29432

Kevin

wbyers

so as far as anyone knows, it's not possible?
Do the developers still come on?

allan

Kevin and @tangerine are correct - DataTables does not support tables with multiple tbody elements.

Perhaps one option would be to move the row that you are using as a grouping header from the tbody into the thead? DataTables does support multiple rows in the thead.

I had a look at the link, but I only see one table on it at the moment.

Allan

wbyers

Thank you. It's been taken care of. We had to restructure it before the table we chose to go with, that you now see in the link, would work properly