Question RowsGroup DataTable - Paginate Button doesn't work

[rayi06]

There is no error after i click paginate button, but it always showing the first page whatever page that i clicked. If i comment the rowsGroup then paginate button will work properly.
Where's the mistake?

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/plugin/bootstrap-waitingfor/bootstrap-waitingfor.min.js"></script>
<script src="~/Scripts/bootstrap/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v2.0.0/dataTables.rowsGroup.js"></script>

$('#tableID').DataTable({
            lengthMenu: [50, 100, 200],
            bLengthChange: true,
            pageLength: 50,
            scrollCollapse: true,
            scrollY: "400px",
            autoWidth: true,
            rowsGroup: [0, 1, 2, 3, 4, 5]
        });

<table id="tableID" data-page-size='7' class="table table-striped table-hover table-bordered table-responsive" style="font-family:'Poppins-Regular'">
                                    <thead style="font-size:12px">
                                        <tr role="row" class="rowHead">
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                No
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5.8%" rowspan="2">
                                                Distributor Code
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 10%" rowspan="2">
                                                Description
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                Country
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                Country Name
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                ETD
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                Total Capacity
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                Total Usage
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%" rowspan="2">
                                                Remaining Stall Total
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 20%" colspan="4">
                                                Detail Location
                                            </th>
                                        </tr>
                                        <tr role="row" class="rowHead">
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%">
                                                Location
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%">
                                                Capacity
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%">
                                                Usage
                                            </th>
                                            <th style="vertical-align: middle; text-align: center; text-align: center; width: 5%">
                                                Remaining Stall
                                            </th>
                                        </tr>
                                    </thead>

                                    <tbody style="font-size: 12px">
                                        @foreach (var item in Model)
                                        {
                                            <tr style="font-family:'Trebuchet MS'">
                                                <td style="vertical-align: middle; width: 5%" id="DetailNo">@Html.DisplayFor(modelItem => item.DetailNo)</td>
                                                <td style="vertical-align: middle; width: 5.8%" id="DetailDistCode">@Html.DisplayFor(modelItem => item.DetailDistCode) </td>
                                                <td style="vertical-align: middle; text-align: center; width: 10%" id="DetailDistName">@Html.DisplayFor(modelItem => item.DetailDistName)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailCtrCode">@Html.DisplayFor(modelItem => item.DetailCtrCode)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailCtrName">@Html.DisplayFor(modelItem => item.DetailCtrName)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailETD">@Html.DisplayFor(modelItem => item.DetailETD)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailTotCap">@Html.DisplayFor(modelItem => item.DetailTotCap)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailTotUsage">@Html.DisplayFor(modelItem => item.DetailTotUsage)</td>
                                                <td style="vertical-align: middle; text-align: center; width: 5%" id="DetailTotRemain">@Html.DisplayFor(modelItem => item.DetailTotRemain)</td>
                                                <td style="vertical-align:middle; text-align:center; width: 5%" id="DetailDtlLoc">@Html.DisplayFor(modelItem => item.DetailDtlLoc)</td>
                                                <td style="vertical-align:middle; text-align:center; width: 5%" id="DetailDtlCap">@Html.DisplayFor(modelItem => item.DetailDtlCap)</td>
                                                <td style="vertical-align:middle; text-align:center; width: 5%" id="DetailDtlUsage">@Html.DisplayFor(modelItem => item.DetailDtlUsage)</td>
                                                <td style="vertical-align:middle; text-align:center; width: 5%" id="DetailDtlRemain">@Html.DisplayFor(modelItem => item.DetailDtlRemain)</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>

Output:

 

[Skydiver]

Looks like a whole bunch of JavaScript and HTML. How is this a C# question?