wake-up-neo.com

So initialisieren Sie dataTables mit neu abgerufenen Daten vom Server mithilfe von ajax in MVC

Also hier habe ich eine Liste von Menüs für Admin und unter ihnen habe ich Upload-Nachrichten. Wenn auf dieses bestimmte Menü geklickt wird, rufe ich eine Teilansicht wie folgt auf.

$("#body_data").load("/Admin/GetDailyNews", function () {
          $("#dailyNews").dataTable({
                    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    "columnDefs": [{ "targets": 3, "orderable": false }],
                    "pagingType": "full_numbers",
                    "oLanguage": { "sSearch": "" },
                    "deferRender": true
          });
}

Mein PartialViewResult in AdminController ist wie folgt:

[HttpGet]
public PartialViewResult GetDailyNews()
{
     var context=new MyContext();
     List<AVmodel.NewsEventsViewModel> model = new List<AVmodel.NewsEventsViewModel>();
     List<news> news = (from n in context.news where n.stdate >= System.DateTime.Now orderby n.stdate descending select n).ToList();
     foreach (var NEWS in news)
     {
          model.Add(new AVmodel.NewsEventsViewModel()
          {
               EDate = NEWS.stdate,
               EDesc = NEWS.brief,
               EName = Convert.ToString(NEWS.name),
               NID = NEWS.nid
          });
     }
     return PartialView("_UploadNews", model);
}

Meine _UploadNews.cshtml ist wie folgt

@model IEnumerable<MCB.Models.BusinessObjects.AVmodel.NewsEventsViewModel>
<table id="dailyNews" cellspacing="0" width="100%" class="table table-condensed table-hover table-responsive table-bordered order-column">
     <thead>
           <tr>
               <th>Event Date</th>
               <th>Event Name</th>
               <th>Detailed News</th>
               <th class="disabled">Actions</th>
          </tr>
     </thead>
     <tbody>
          @foreach (var news in Model)
          {
               <tr data-row="[email protected]">
                   <td>@news.EDate.Date.ToShortDateString()</td>
                   <td>@Convert.ToString(news.EName)</td>
                   <td>@Convert.ToString(news.EDesc)</td>
                   <td><button class="btn btn-primary" data-target="#editAddNews" data-toggle="modal" onclick="javascript: EditNews(this);" data-info="[email protected]"><span class="fa fa-edit"></span> </button>&nbsp; <button class="btn btn-danger" onclick="javascript: DeleteNews(this);" data-info="[email protected]"><span class="fa fa-trash-o"></span></button></td>
               </tr>
          }
     </tbody>
</table>

Bis jetzt ist es gut. Alles läuft gut und die Tabelle zeigt nur die Nachrichten der zukünftigen Tage an. Jetzt habe ich eine Option für den Admin, um die gesamten Nachrichten einschließlich aller vergangenen Tage aus der Tabelle abzurufen. Daher habe ich in meiner Teilansicht ein Kontrollkästchen wie folgt gespeichert: bootstrap-switch-Typ:

<input type="checkbox" name="fetchNews-checkbox" data-on-text="All News" data-off-text="Upcoming News" data-on-color="primary" data-off-color="default" data-label-width="100px" data-label-text="News details">

und ich habe eine onswitchchange für dieses bestimmte Kontrollkästchen wie folgt geschrieben:

$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) {
     if (state) 
     {
           fetchNews('all');
     }
     else 
     {
           fetchNews('upcoming');
     }
});

und meine fetchNews-Funktion ist wie folgt:

function fetchNews(context)
{
    if(context!="")
    {
        $("#dailyNews").dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Admin/FetchNews"
        });
    }
}

wenn diese Funktion aufgerufen wird, erhalte ich eine Warnmeldung mit der Aufschrift 

DataTables-Warnung: table id = dailyNews - Reinitialisierung nicht möglich Datentabelle. Weitere Informationen zu diesem Fehler finden Sie unter http://datatables.net/tn/3

Ich habe den oben genannten Link besucht, konnte aber nichts verstehen. Kann mir bitte jemand Bescheid geben, wie kann ich eine Controller-Json-Methode aufrufen und eine Liste mit Nachrichten in diese Tabelle rendern?

15
Guruprasad Rao

Die Fehlermeldung http://datatables.net/tn/3 gibt das Problem genau an. Sie initialisieren die Tabelle mit verschiedenen Optionen in fetchNews().

Sie müssen zuerst die Tabelle zerstören, siehe http://datatables.net/manual/tech-notes/3#destroy . Sie können dies mit $("#dailyNews").dataTable().fnDestroy() (DataTables 1.9.x) oder $("#dailyNews").DataTable().destroy() (DataTables 1.10.x) tun.

function fetchNews(context)
{
     if(context!="")
     {
        // Destroy the table
        // Use $("#dailyNews").DataTable().destroy() for DataTables 1.10.x
        $("#dailyNews").dataTable().fnDestroy()

        $("#dailyNews").dataTable({
           // ... skipped ...
        });
    }
}

Wenn Sie DataTables 1.10.x verwenden, können Sie die neue Tabelle alternativ mit der zusätzlichen Option "destroy": true initialisieren, siehe unten.

function fetchNews(context)
{
     if(context!="")
     {
        $("#dailyNews").dataTable({
            "destroy": true,
            // ... skipped ...
        });
    }
}
52
Gyrocode.com

Nach vielen Recherchen funktionierte dies für mich : - Zuerst prüfen, ob dataTable vorhanden ist oder nicht, Ob die dataTable zerstört wird und dann neu erstellt

if ($.fn.DataTable.isDataTable("#mytable")) {
  $('#mytable').DataTable().clear().destroy();
}

$("#mytable").dataTable({...
                       
                });

31
Ravi.Dudi

Während die obigen Antworten das Symptom behandeln ( 'Kann nicht neu initialisiert werden' Warnung), behandeln sie nicht die Grundursache des Problems: Sie dürfen nicht DataTable innerhalb von jQuery $.load()/$.ajax()/$.get()/$.post() erfolgreicher Rückrufe ausfüllen, da alle Arten von Rückrufen ausgelöst werden von Problemen, die durch asynchrone AJAX-Aufrufe verursacht werden.

Durch Aufrufen der Methode DataTables .destroy() können Sie die Situation noch verschlimmern, da Sie jedes Mal, wenn Sie die Daten vom Server abrufen, Ihre DataTable unnötig zerstören und neu erstellen, was zumindest eine Verschwendung von Leistung ist.

Verwenden Sie stattdessen die Option DataTables ajax , die den AJAX-Aufruf an Ort und Stelle auslöst Dies ist erforderlich, damit Sie die API-Methoden von DataTables vollständig nutzen und die Leistung nicht beeinträchtigen können. Um z. B. Ihre Daten erneut abzurufen, führen Sie einfach ajax.reload() aus, wenn Sie die URL vor dem Laden ändern müssen Daten zu datieren, tun Sie ajax.url().load()

Die vollständige Live [~ # ~] -Demo [~ # ~] des OP-Beispiels könnte so einfach ausgesehen haben:

//initialize DataTables
const dataTable = $('#newsTable').DataTable({
        //specify AJAX source, params and response source
        ajax: {
                url: 'https://newsapi.org/v2/everything',
                data: () => ({
                                q: ($('input[name="subject"]:checked').val() || 'javascript'),
                                language: 'en',
                                apiKey: '699ba21673cd45aba406b1984b480b60'
                }),
                dataSrc: 'articles'
        },
        //set up table columns
        columns: [
                {title: 'Source', data: 'source.name'},
                {title: 'Title', data: 'title'},
                {title: 'Content', data: 'content'}
        ]
});

//trigger table data re-fetch with new subject
$('input[name="subject"]').on('change', () => dataTable.ajax.reload())
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="test.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <label>Pick the subject:</label>
  <input type="radio" name="subject" value="python">python</input>
  <input type="radio" name="subject" value="javascript">javascript</input>
  <table id="newsTable"></table>
</body>
</html>
1

Datatables verfügt über eine Abrufoption. Wenn Ihre Tabelle nach der Inicialisierung andere Inhalte erhält, können Sie den Parameter einstellen: retrieve: true,

Sie können die Dokumentation hier ansehen: https://datatables.net/reference/option/retrieve

$("#body_data").load("/Admin/GetDailyNews", function () {
      $("#dailyNews").dataTable({
                retrieve: true,
                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                "columnDefs": [{ "targets": 3, "orderable": false }],
                "pagingType": "full_numbers",
                "oLanguage": { "sSearch": "" },
                "deferRender": true
      });

}

1
Dierp

$ ('# mytable'). DataTable (). destroy (); $ ('# mytable'). html ('');

0
Joseph Ocampo