Buongiorno,
sto cercando di implementare un sistema di paginazione su una semlice tabella HTML tramite le classi JQuery DataTable su un file cshtml(MVC).
Invio il codice della pagina in questione:
@model IEnumerable<PortaleConsulentiWeb.Models.Consulente>
@{
ViewBag.Title = "Anagrafica Consulente";
}
<h2>Anagrafica Consulenti</h2>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/controller.js"></script>
<script src="~/Scripts/app/filters.js"></script>
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('#tblConsulenti').DataTable({
"pagingType": "full_numbers"
});
});
</script>
@*@using (Html.BeginForm("caricaConsulenti", "Consulentes", FormMethod.Post))
{
<button type="submit" class="btn btn-success" onclick="this.form.submit(); this.disabled = true; document.getElementById('iconaAggiornamento').classList.add('gly-spin')">Aggiorna <i id="iconaAggiornamento" class="glyphicon glyphicon-refresh"></i></button>
}*@
@using (Html.BeginForm())
{
<div class="panel panel-default" ng-app="appConsulenti">
<div class="panel-heading" style="background-color:#eedc00;">Ricerca Consulente</div>
<div class="panel-body" ng-controller="ControllerConsulenti" ng-init="loadFilters('@Html.Raw(ViewBag.FiltroCorrente)')">
<div class="row">
<div class="col-md-3">
Nome:<br />
@Html.TextBox("SearchNome", null, new { @class = "form-control", ng_model = "selectedNome", uib_typeahead = "consulente.Nome for consulente in consulenti| filter:{Nome:$viewValue} | filter:{Cognome:selectedCognome}|filter:filterFornitore | unique:'Nome' | limitTo:8", autocomplete = "off" })
</div><!-- /.col-lg-6 -->
<div class="col-md-3">
Cognome:<br />
@Html.TextBox("SearchCognome", null, new { @class = "form-control", ng_model = "selectedCognome", uib_typeahead = "state.Cognome for state in consulenti | filter:{Nome:selectedNome} |filter:filterFornitore | unique:'Cognome' | filter:{Cognome:$viewValue}| limitTo:8", typeahead_show_hint = "True", autocomplete = "off" })
</div><!-- /.col-lg-6 -->
<div class="col-md-3">
Fornitore:<br />
@*@Html.TextBox("SearchFornitore", null, new { @class = "form-control", ng_model = "selectedFornitore", uib_typeahead = "state.Fornitore.RagioneSociale for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} | unique:'Fornitore.RagioneSociale' | filter:$viewValue| limitTo:8", autocomplete = "off" })*@
<select class="form-control" ng-model="selectedFornitore"
name="SearchFornitore"
ng-options="state.Fornitore.RagioneSociale as state.Fornitore.RagioneSociale for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} | unique:'Fornitore.RagioneSociale' | filter:$viewValue | orderBy:'Fornitore.RagioneSociale'">
<option value="">-- Seleziona Fornitore --</option>
@*<option ng-repeat="state.Fornitore.RagioneSociale as state.Fornitore.RagioneSociale for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} | unique:'Fornitore.RagioneSociale'" value="{{state.Fornitore.RagionSociale}}">{{state.Fornitore.RagionSociale}}</option>*@
</select>
</div><!-- /.col-lg-6 -->
<div class="col-md-3">
Richiedente:<br />
@Html.TextBox("SearchAutore", null, new { @class = "form-control", ng_model = "selectedAutore", uib_typeahead = "state.Autore for state in consulenti | filter:{Autore:''}| filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} | unique: 'Autore'| filter:{Autore:$viewValue}| limitTo:8", autocomplete = "off" })
</div>
</div><!--fine row1-->
<div class="row second-row">
@*<div class="col-md-3">
Username:
@Html.TextBox("SearchUsername", null, new { @class = "form-control", ng_model = "selectedUserName", uib_typeahead = "state.UserName for state in consulenti | filter:{UserName:''}| filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} |filter:filterFornitore | filter:{UserName:$viewValue}| limitTo:8", autocomplete = "off" })
</div>*@<!-- /.col-lg-6 -->
<div class="col-md-3">
Stato Account:
@*@Html.TextBox("SearchOnsite", null, new { @class = "form-control", ng_model = "selectedOnsite", uib_typeahead = "state.Onsite for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} |filter:filterFornitore| unique:'Onsite' | filter:$viewValue| limitTo:8", typeahead_show_hint = "True", autocomplete = "off" })*@
<select class="form-control" name="SearchUsername" ng-model="selectedUsername">
<option value=""></option>
<option value="In Bozza">In Bozza</option>
<option value="Attivo">Attivo</option>
<option value="Disabilitato">Disabilitato</option>
</select>
@*@Html.CheckBox("SearchOnsite", new {@class = "form-control check-box big-checkbox" })*@
</div>
<div class="col-md-3">
Email:
@Html.TextBox("SearchEmail", null, new { @class = "form-control", ng_model = "selectedEmail", uib_typeahead = "consulente.Email for consulente in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} |filter:filterFornitore | filter:{Email:$viewValue}| limitTo:8", typeahead_show_hint = "True", autocomplete = "off" })
</div><!-- /.col-lg-6 -->
<div class="col-md-3">
Codice Fiscale:
@Html.TextBox("SearchCodiceFiscale", null, new { @class = "form-control", ng_model = "selectedCodiceFiscale", uib_typeahead = "state.CodiceFiscale for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} |filter:filterFornitore | filter:{CodiceFiscale:$viewValue}| limitTo:8", typeahead_show_hint = "True", autocomplete = "off" })
</div><!-- /.col-lg-6 -->
<div class="col-md-3">
On Site:
@*@Html.TextBox("SearchOnsite", null, new { @class = "form-control", ng_model = "selectedOnsite", uib_typeahead = "state.Onsite for state in consulenti | filter:{Nome:selectedNome}| filter:{Cognome:selectedCognome} |filter:filterFornitore| unique:'Onsite' | filter:$viewValue| limitTo:8", typeahead_show_hint = "True", autocomplete = "off" })*@
<select class="form-control" name="SearchOnsite" ng-model="selectedOnsite">
<option value=""></option>
<option value="true">Si</option>
<option value="false">No</option>
</select>
@*@Html.CheckBox("SearchOnsite", new {@class = "form-control check-box big-checkbox" })*@
</div><!-- /.col-lg-6 -->
</div><!--fine row2-->
<br />
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-3">
<button class="btn btn-default" type="submit">Cerca</button>
<a href="@Url.Action("Create", "Consulentes")" class="btn btn-default">
<span>Crea Nuovo</span>
</a>
</div>
</div>
</div><!-- /panel-body -->
</div>
}
@if (ViewBag.SuccessMessage != null)
{
@Html.Raw(ViewBag.SuccessMessage)
<br />
}
<table id="tblConsulenti" class="table">
<tr>
<th>
@*@Html.DisplayNameFor(model => model.Nome)*@
@Html.ActionLink("Nome", "Index", new { ordinamento = ViewBag.NomeSortParm, vecchioFiltro = ViewBag.FiltroCorrente }, new { @class = "aFiltro" })
</th>
<th>
@Html.ActionLink("Cognome", "Index", new { ordinamento = ViewBag.CognomeSortParm, vecchioFiltro = ViewBag.FiltroCorrente }, new { @class = "aFiltro" })
</th>
<th>
@Html.ActionLink("Fornitore", "Index", new { ordinamento = ViewBag.FornitoreSortParm, vecchioFiltro = ViewBag.FiltroCorrente }, new { @class = "aFiltro" })
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>
@Html.DisplayNameFor(model => model.Telefono)
</th>
<th style="width: 350px;"></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Nome)
</td>
<td>
@Html.DisplayFor(modelItem => item.Cognome)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fornitore.RagioneSociale)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
@Html.DisplayFor(modelItem => item.Telefono)
</td>
<td>
<a href="@Url.Action("Edit", "Consulentes",new { id=item.ID })" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-html="true" title="Modifica le informazioni del consulente:<br/> sono modificabili solo le informazioni inerenti il documento di identità, l'email, il numero di telefono e l'attributo ''On Site''">
<span>Modifica</span>
</a>
<a href="@Url.Action("Details", "Consulentes",new { id=item.ID })" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Visualizza il dettaglio del consulente ">
<span>Visualizza</span>
</a>
<a href="@Url.Action("Create", "Richiesta",new { id=item.ID })" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Crea una nuova richiesta per il consulente ">
<span>Richiedi</span>
</a>
@*<button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Crea una nuova richiesta di abilitazioni per il consulente ">Richiedi</button>*@
@if (item.StatoAD == Stato_Active_Directory.BOZZA)
{
<a href="@Url.Action("Delete", "Consulentes",new { id=item.ID })" class="btn btn-default">
<span>Elimina</span>
</a>
}
</td>
</tr>
}
</table>
Purtroppo però al caricamento della pagina la console mi segnala questo errore:
Consulentes:73 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (Consulentes:73)
at fire (jquery-1.12.4.js:3232)
at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
at Function.ready (jquery-1.12.4.js:3582)
at HTMLDocument.completed (jquery-1.12.4.js:3617)
Qualcuno può aiutarmi?
Grazie Mille!
Andrea
