web-dev-qa-db-fra.com

Comment réinitialiser dataTables avec les données récemment extraites du serveur en utilisant ajax dans MVC

Donc ici, j'ai la liste des menus pour l'administrateur et sous eux j'ai des nouvelles de téléchargement. Lorsque ce menu particulier est cliqué, j'appelle une vue partielle comme ci-dessous.

$("#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
          });
}

Mon PartialViewResult dans AdminController est comme ci-dessous:

[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);
}

Mon _UploadNews.cshtml est comme ci-dessous

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

Donc jusqu'à maintenant c'est bien. Tout se passe bien et la table affiche uniquement les nouvelles qui sont des jours à venir. Maintenant, j’ai la possibilité pour l’administrateur d’extraire l’ensemble des nouvelles de la table, y compris les jours passés. Donc, j'ai gardé une case à cocher dans mon partialview comme ci-dessous qui est un type de commutateur d'amorçage} _:

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

et j’ai écrit une onswitchchange pour cette case à cocher comme ci-dessous:

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

et ma fonction fetchNews est la suivante:

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

quand cette fonction s'appelle je reçois une alerte qui dit 

Avertissement DataTables: id de table = dailyNews - Impossible de réinitialiser DataTable. Pour plus d'informations sur cette erreur, veuillez consulter http://datatables.net/tn/3

J'ai visité le lien ci-dessus mais je n'ai rien compris. Quelqu'un peut-il me faire savoir s'il vous plaît, comment appeler une méthode json du contrôleur et afficher la liste des nouvelles dans cette table?

jqueryajaxasp.net-mvcdatatables
15
Guruprasad Rao

Le message d'erreur http://datatables.net/tn/3 précise le problème. Vous réinitialisez la table avec différentes options dans fetchNews().

Vous devez d'abord détruire la table, voir http://datatables.net/manual/tech-notes/3#destroy . Vous pouvez le faire avec $("#dailyNews").dataTable().fnDestroy() (DataTables 1.9.x) ou $("#dailyNews").DataTable().destroy() (DataTables 1.10.x).

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

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

Si vous utilisez DataTables 1.10.x, vous pouvez également initialiser la nouvelle table avec l’option supplémentaire "destroy": true (voir ci-dessous).

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

Cela a fonctionné pour moi après de nombreuses recherches : - Commencez par vérifier si dataTable existe ou non, Si détruit le dataTable puis le recréer 

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

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

31
Ravi.Dudi

Datatables a une option de récupération. Si votre table reçoit un autre contenu après l’inicialisation, vous pouvez définir le paramètre: retrieve: true,

Vous pouvez regarder la documentation ici: 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