How to deal with tables with span?
How to deal with tables with span?
I found that DataTable plugin is nice, clean and fast but I can't find out solution for my problem: I have a table where header is consist of couple rowspans and colspans and then plugin for fixed header and 1-2 left column works well with common rows., But my table rows aren't plain rows but first column is rowspan and such table DT plugin doesn't recognize: no slider, like JS doesn't works! How to deal with it?
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<tbody>
<tr>
<th rowspan="2" scope="col">CITY</th>
<th rowspan="2" scope="col">YP</th>
<th colspan="3" scope="col">MORNING</th>
<th colspan="3" scope="col">DAY</th>
<th colspan="3" scope="col">NIGHT</th>
</tr>
<tr>
<td>Temp</td>
<td>Sun</td>
<td>Wind</td>
<td>Temp</td>
<td>Sun</td>
<td>Wind</td>
<td>Temp</td>
<td>Sun</td>
<td>Wind</td>
</tr>
<tr>
<th rowspan="2" scope="col">Name of city 1</th>
<td>I</td>
<td>80</td>
<td>Y</td>
<td>N</td>
<td>90</td>
<td>Y</td>
<td>N</td>
<td>96</td>
<td>N</td>
<td>Y</td>
</tr>
<tr>
<td>II</td>
<td>94</td>
<td>Y</td>
<td>N</td>
<td>96</td>
<td>Y</td>
<td>N</td>
<td>98</td>
<td>N</td>
<td>Y</td>
</tr>
<th rowspan="2" scope="col">Name of city 2</th>
<td>I</td>
<td>77</td>
<td>N</td>
<td>N</td>
<td>80</td>
<td>Y</td>
<td>Y</td>
<td>88</td>
<td>N</td>
<td>Y</td>
</tr>
<tr>
<td>II</td>
<td>80</td>
<td>Y</td>
<td>Y</td>
<td>82</td>
<td>Y</td>
<td>Y</td>
<td>87</td>
<td>N</td>
<td>Y</td>
</tr>
</tbody>
</table>
<style>
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 640px;
margin: 0 auto;
}
</style>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2,
rightColumns:0
}
} );
} );
Is there some way to deal such rows and in same time to get working DT plugin with fixed left columns and header? Thanks.
This discussion has been closed.
Answers
Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.
Information on how to create a test page, if you can't provide a link to your own page can be found here.
Thanks,
Allan