Two forms per row, paging/searching not working
Two forms per row, paging/searching not working
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
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