Comment faire pour réinitialiser les tables de données avec les données extraites à partir du serveur à l'aide d'ajax en MVC
Donc, ici, j'ai la liste de menus pour les admin et sous eux, j'ai Télécharger de nouvelles. Lorsque ce menu est cliqué, j'appelle une vue partielle en tant que 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> <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>
Jusqu'à maintenant c'est bon. Tout va bien, et le tableau affiche uniquement les nouvelles qui sont des jours à venir. Maintenant, j'ai une option pour les admin de récupérer l'ensemble des actualités de la table, y compris les derniers jours. J'ai donc gardé une case à cocher dans mon partialview comme ci-dessous qui est un bootstrap type de commutateur:
<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 mon fetchNews
fonction est comme ci-dessous:
function fetchNews(context)
{
if(context!="")
{
$("#dailyNews").dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/Admin/FetchNews"
});
}
}
lorsque cette fonction est appelée, je reçois une alerte qui dit
DataTables avertissement: table id=dailyNews - Ne peut pas réinitialiser
DataTable. Pour plus d'informations sur cette erreur, consultez
http://datatables.net/tn/3
J'ai visité le dessus de ladite lien, mais n'a pas été en mesure de comprendre quoi que ce soit. Quelqu'un peut s'il vous plaît laissez-moi savoir, comment appeler un contrôleur de json méthode et de rendre la liste des news dans ce Tableau?
OriginalL'auteur Guruprasad Rao | 2015-03-19
Vous devez vous connecter pour publier un commentaire.
Le message d'erreur http://datatables.net/tn/3 états le problème justement. Vous êtes à la ré-initialisation du tableau avec les différentes options dans
fetchNews()
.Vous devez détruire la table d'abord, 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).Alternativement, si vous êtes à l'aide de tables de données 1.10.x, vous pouvez initialiser la nouvelle table avec option supplémentaire
"destroy": true
, voir ci-dessous.Merci pour le partage!
Merci a travaillé comme un charme ...
OriginalL'auteur Gyrocode.com
Tables de données a un récupérer option. Si votre table de recevoir d'autres contenus après inicialization vous pouvez définir le paramètre: récupérer: c'est vrai,
Vous pouvez regarder la documentation ici: https://datatables.net/reference/option/retrieve
}
Thaks! J'ai édité ma réponse avec le lien.
OriginalL'auteur Dierp