Two forms per row, paging/searching not working

Two forms per row, paging/searching not working

lemoniscoollemoniscool Posts: 2Questions: 1Answers: 0

Hi!
Im trying to implement paging and searching into a table using DataTables which needs to have two simple forms per row. The forms can be put into 1 cell each as its just a button to submit the form and a hidden input.
The table layout currently is as follows:

<table class="mall_table">
    <thead>
        <tr>
            <th colspan="2">Item Name</th>
            <th>Price</th>
            <th colspan="2">Purchase Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img class="mall-img" src="./img/someImg.png"></td>
            <td>Some Name</td>
            <td>123</td>
            <td>
                <form method="post">
                    <input type="hidden" name="hiddenData" value="someData" />
                    <input type="submit" name="buy_1" value="Buy Option 1" />
                </form>
            </td>
            <td>
                <form method="post">
                    <input type="hidden" name="hiddenData" value="someData" />
                    <input type="submit" name="buy_2" value="Buy Option 2" />
                </form>
            </td>
        </tr>
        [... more rows like above...]
    </tbody>
</table>

The initialization looks like this:

$(document).ready(function(){
    $('table.mall_table').DataTable({
        "ordering": false,
        "pageLength": 4,
        "paging": true,
        "searching": true,
        "info": false,
        "scrollY": 400
    });
});

The table gets successfully turned into a DataTable, but the search box is not shown and paging is not applied either, no matter what layout or settings i try. Can someone explain why, is it possible to do something like this at all? If so, any ideas on how to accomplish it?

regards,
lemoniscool

Answers

  • lemoniscoollemoniscool Posts: 2Questions: 1Answers: 0

    I found out what the problem was...
    Somewhere i read that DataTables has problems with colspan in certain situations. That was also the case in my situation. I removed the colspan from the thead elements and it worked without problems.

    I hope if someone has a similar problem and reads this it will help him.

    regards,
    lemoniscool

This discussion has been closed.