96 messaggi dal 27 marzo 2013
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&nbsp;<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

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.