2016-05-18 16 views
0

Ich habe ein Problem mit jQuery Datatables Plugin in MVC.ASP.NET MVC Teilansicht jquery Datatables

Ich habe eine Ansicht mit Ajax-Form whitch laden eine Teilansicht mit Tabelle auf Sumbit.

Ansicht

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

    </div> 

Teilansicht mit Tisch

@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> 

Das Problem ist, dass, wenn ich Skript setzen

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

in Hauptansicht wird es nicht, weil Teilansicht Last arbeitet sein von Ajax. Und wenn ich dieses Skript in eine Teilansicht einfüge, wird es mit Verzögerung funktionieren: Zuerst wird der Benutzer eine einfache HTML-Tabelle sehen und dann wird er in eine Datentabelle konvertiert.

Gibt es eine Möglichkeit, Lastteilansicht mit Datentabelle zu korrigieren? Danke für Ratschläge.

+0

Was passiert, wenn Sie setzen die '$ ('# productsTable'). DataTable();' außerhalb von '$ (Dokument) .ready (function() {}'? – SeM

+0

Die Das gleiche Problem - es wird einfache HTML-Tabelle anzeigen und dann in Datentabelle konvertieren – user3609841

+0

Versuchen Sie, Ihre partielle Ansicht mit @ {Html.RenderAction ("MyAction", "MyController") zu rendern;} – SeM

Antwort

1

Sie können auf dem Server nichts tun, um die Datentabelle "vorab zu laden", da sie nur auf dem Client ausgeführt werden kann. Um DataTable() ausführen zu können, muss der Browser sowohl jQuery als auch HTML geladen haben, bevor Sie ihn transformieren können, weshalb ein "Blinzeln" von hässlich ist.

ich Sie es vorschlagen, laden (mit Ajax, wenn Sie möchten) in ein div mit CSS position:absolute; und visibility:hidden; (nicht display:none; und positionieren Sie es irgendwo außerhalb des Bildschirms (zB mit left: -3000em; oder ähnliches). Nachdem alles geladen und DataTable() gelaufen , können Sie das div bewegen, wo es mit JS sein sollte, und wechseln position und visibility wieder normal.

Sie können dies auch mit einem süßen Fade-in-Effekt tun, wenn Sie wollen. :)

Verwandte Themen