ASP.NET MVC partial view jquery datatables

Question

I have a problem with jQuery Datatables plugin in mvc.

I have a view with ajax-form whitch load a partial view with table on sumbit.

View

...
    @using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions { UpdateTargetId = "myList" }, new { @id = "searchForm", @class = "form-horizontal" }))
    {
                                // some html  
    }
    <div id="myList">

    </div>

Partial View with table

@model IEnumerable<Item>
<table id="productsTable">
    <thead>
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(x => item.Name)</td>
            <td>@Html.DisplayFor(x => item.Description)</td>
            <td>
                <div>
                    <a href="@Url.Action("Edit", "MyController", new {id =            item.Id})">
                    </a>
                    <a href="@Url.Action("Delete", "MyController", new {id = item.Id})" >
                    </a>
                </div>
            </td>
        </tr>
    }
    </tbody>
</table>

The problem is that if I put script

$(document).ready(function() {
   $('#productsTable').DataTable();
});

in main View it will be not work because partial view load by ajax. And if I put this script in partial view it will be work with delay: at first user will see simple html table and than it will be convert to datatable.

Is there any way to correct load partial view with datatable? Thanks for advices.

What if you put the $('#productsTable').DataTable(); outside of $(document).ready(function(){}? — SᴇM
– SᴇM, Commented May 18, 2016 at 20:13
The same problem - it will show simple html table and than convert to datatable — user3609841
– user3609841, Commented May 18, 2016 at 20:18
Try to render your partial view by using @{Html.RenderAction("MyAction", "MyController");} — SᴇM
– SᴇM, Commented May 18, 2016 at 21:26

Puppetmupp · Accepted Answer · 2016-05-18 21:18:52Z

2

You can't do anything on the server to "preload" the datatable, since it can only be run on the client. To run DataTable(), the browser needs to have loaded both jQuery and HTML before you can transform it, which is why there is a "blink" of ugly.

I suggest you load it (with Ajax if you wish) into a div with CSS position:absolute; and visibility:hidden; (not display:none; and position it somewhere off screen (for example with left: -3000em; or similar). After everything is loaded and DataTable() has run, you can move the div to where it should be with JS and toggle position and visibility back to normal.

You can even do this with a sweet fade-in effect, if you want. :)

answered May 18, 2016 at 21:18

Puppetmupp

698 bronze badges

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

Comments

Vibin Mb · Accepted Answer · 2019-03-12 08:55:04Z

1

$(document).ready(function() {
   $('#productsTable').DataTable();
});

you should place this code inside the success of ajax call. I think this may solve your problem :)

answered Mar 12, 2019 at 8:55

Vibin Mb

515 bronze badges

1 Comment

marcel_g Over a year ago

adding the $(document).ready(function() { to my ajax return function didn't work. It still says DataTable is not a function. :( If I have .DataTable() inside the main $(document).ready() call, and have the html loaded without ajax, it works.

Collectives™ on Stack Overflow

ASP.NET MVC partial view jquery datatables

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related