ASP.NET Core Razor Partial View Datatable dispaly with paging second time click. firstime only data?

Jeevan_C

When i click button for open jquey datatbale inside bootstrap modal popup it shows paging datatable in second time click. firstime click shows it as normal data table.

Dashboard.cshtml

$("#myBtn").on("click", function () {
                      var route = '@Url.Action("GetOrderDashboardListView", "CSDashboard", new { orderStatus = "Confirmed", priorityType = ""  })';
                      $('#partial').load(route);

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="partial"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

CSDashboardController.cs

        public ActionResult GetOrderDashboardListView(string orderStatus, string priorityType)
        {
            try
            {
               
                GetCustomerOrderDashboardResponse order = new GetCustomerOrderDashboardResponse();

                order = APICaller.GetCustomerOrderDashboardList(GetUserIP(), tempKey, model); // get data from APICaller

                return PartialView("_CustomerOrderDashboardList", order.OrderList);
            }
            catch (Exception)
            {
                throw;
            }
        }

_CustomerOrderDashboardList.cshtml (Partial View)

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>


<style>
    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
        font-weight: bold;
    }

    .table th, .table td {
        padding: 0.1rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
        font-weight: normal;
    }
</style>

<script>
    $(document).ready(function () {
        $('#ConfirmTable').DataTable({
            paging: true
        });
    });
</script>

<table id="ConfirmTable" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%" data-order='[[ 1, "asc" ]]' data-page-length='4'>
    <thead>
        <tr>
            <th>
                OrderDate
            </th>
            <th>
                OrderNumber
            </th>
            <th>
                ModifiedOn
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.OrderDate
                </td>
                <td>
                    <a href="#" onclick="OpenNew(@item.OrderNumber)" id="anchor">@item.OrderNumber</a>
                </td>
                <td>
                    @item.ModifiedOn
                </td>
            </tr>
        }
    </tbody>
</table>

colin

Hi @Jeevan_C ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin