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
This discussion has been closed.
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