Datatable in a partialview is aligning right after loading it by ajax request

Question

I loaded datatable from a partialview. when it loads with a controller it works fine and remains in correct position. But when I reload the datatable by calling ajax the datatable aligned to right.

Note that I am using signalR and the ajax is firing when the SqlDependency is notifying a change.

Partial View:

@model Model.Contest
@Html.Hidden("NotifierEntity", (object)ViewBag.NotifierEntity)
<table id="Standings" class="table table-bordered table-hover" >

@if (Model.Participants != null)
{
    char a = 'A';
    <thead>
    <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Score</th>

        @foreach (var item in Model.Problems.OrderBy(x => x.ProblemName))
        {
            <th>
                @a
            </th>
            a++;
        }

    </tr>
    </thead>

    <tbody>
    @{ int i = 0;}
    @foreach (var item in Model.Standings.OrderByDescending(p => p.score))
    {
        i++;
        <tr>
            <td>@i</td>
            <td>@item.Participant.Id</td>
            <td>
                @item.score
            </td>
            @foreach (var mal in Model.Problems.OrderBy(x => x.ProblemName))
            {

                <td>
                    <button type="button" class="btn btn-success">
                        @if (@Model.Submissions.Where(c => c.Participant.Id == item.Participant.Id && c.Problem.Id == mal.Id && c.CompilerComment == "Accepted") != null)
                        {
                            @Model.Submissions.Where(c => c.Participant.Id == item.Participant.Id && c.Problem.Id == mal.Id && c.CompilerComment == "Accepted").Count()
                            ;
                        }
                        else
                        {
                            <p>0</p>
                        }

                    </button>

                    <br />
                    <button type="button" class="btn btn-danger">
                        @if (@Model.Submissions.Where(c => c.Participant.Id == item.Participant.Id && c.Problem.Id == mal.Id && c.CompilerComment != "Accepted") != null)
                        {
                            @Model.Submissions.Where(c => c.Participant.Id == item.Participant.Id && c.Problem.Id == mal.Id && c.CompilerComment != "Accepted").Count()
                        }
                        else
                        {
                            <p>0</p>
                        }

                    </button>

                </td>
            }
            @*<td>
                            @Html.DisplayFor(modelItem => item.TimeLimit)
                        </td>
                        <td></td>*@

        </tr>
    }
    </tbody>
}

@section scripts{


    <script>
        $(document).ready(function () {
            $("#Standings").DataTable();
        });
    </script>
    <script src="@Url.Content("~/Scripts/val.js")"></script>
}

And my ajax request in Orginal View:

$.post('@Url.Action("StandingPartial", "Contest", new { id = @contestId }, Request.Url.Scheme)')
            .done(function (response) {
                $("#standings").html(response)
                if (!signalRHubInitialized)
                    InitializeSignalRHubStore();
            });

Image without ajax:

Image with ajax request:

Syed Mohammad Fahim Abrar · Accepted Answer · 2018-11-18 19:12:48Z

1

The structure of a partial view controller should be:

    public ActionResult StandingPartial(Guid Id)
    {
        return PartialView(model);
    }

But i have wrote return View(model); instead

answered Nov 18, 2018 at 19:12

Syed Mohammad Fahim Abrar

9341 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Datatable in a partialview is aligning right after loading it by ajax request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related