2

Me encuentro implementando DataTables.net pero no me esta haciendo la paginación, estoy trabajando con ASP.NET MVC 5, el código que manejo es el siguiente.

@{
ViewBag.Title = "Proveedor";
}

<h2>Proveedor</h2>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<link href="~/Content/datatables.min.css" rel="stylesheet" />
</head>
<body>
    <table id="proveedores" class="table table-hover display" >
        <thead>
            <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
         </tr>
    </tfoot>

    <tbody>
        @foreach (var row in ViewBag.ListarProveedor)
        {
            <tr>
                <td>@row.ProveedorId</td>
                <td>@row.RazonSocial</td>
                <td>@row.NumeroDocumento</td>
                <td>@row.Direccion</td>
                <td>@row.Telefono</td>
            </tr>
        }
    </tbody>  
</table>


<script src="~/scripts/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $("#proveedores").DataTable();
    });
</script>

Documentación DataTables.net

Video Tutorial Datatables Plugin Instalación y Configuración

Layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Errores

3
  • Cambia la referencia del datatables al _Layout
    – JuankGlezz
    Commented el 14 feb. 2017 a las 18:47
  • @JuankGlezz Si, pegue una imagen lo cambie el js pero no funciona Commented el 14 feb. 2017 a las 18:47
  • @PedroÁvila no esta haciendo la paginacion por que tienes dos <td>, p.e. <td>Teléfono</td> <td></td> <td></td> de sobra, un tabla tiene que ser bien estructurada Commented el 14 feb. 2017 a las 19:11

1 respuesta 1

1

Lo que comenta x-rw también es valido y seguiría sin hacer la paginación.

Si lo que quieres es mostrar iconos en esos espacios vacíos haz lo siguiente:

<thead> 
  <tr> 
    <td>ProveedorId</td> 
    <td>Razón Social</td> 
    <td>Número documento</td> 
    <td>Dirección</td> 
    <td>Teléfono</td> 
    <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> 
    <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td> 
  </tr> 
</thead>

y en tu <tbody> puedes hacer lo siguiente como comento @Flxtr:

<tbody>
    @foreach (var row in ViewBag.ListarProveedor)
    {
        <tr>
            <td>@row.ProveedorId</td>
            <td>@row.RazonSocial</td>
            <td>@row.NumeroDocumento</td>
            <td>@row.Direccion</td>
            <td>@row.Telefono</td>
            <td><a href="Controller/Action/@row.ProveedorId">
              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            </a></td> 
            <td><a href="Controller/Action/@row.ProveedorId">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </a></td> 
        </tr>
    }
</tbody>  

Ahora explico porque seguiría sin hacer paginación.

Lo que hace RenderBody() es renderizar la vista donde tienes tu tabla, te marca un error de que no encuentra la referencia de ensamblado de jQuery por que datatables esta declarado antes que jQuery, hay dos cosas que puedes hacer:

1.- Cambiar el encabezado del _layout de esta manera:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <script src="~/scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>

2.- Cambiar los scripts de tu vista al _Layout o bien crear una sección de scripts:

en tu vista:

@section scripts {
  <script src="~/scripts/datatables.min.js"></script>
  <script>
    $(document).ready(function () {
        $("#proveedores").DataTable();
    });
  </script>
}

en el _Layout

...
</div>
  <script src="~/scripts/jquery-3.1.1.min.js"></script>
  <script src="~/Scripts/bootstrap.min.js"></script>
  @RenderSection("scripts", required: false)
</body>
5
  • Siguiendo el paso 1, que sigue? Commented el 14 feb. 2017 a las 19:26
  • solo es de ejecutar la pagina sin problemas porque lo que te genera el error es que no se encuentra una referencia a la librería de jquery desde la librería de datatables, y este error es por las posiciones de declaración de estas
    – JuankGlezz
    Commented el 14 feb. 2017 a las 19:27
  • Entonces la forma de poner las referencias en el Layout es ponerlos en el Head? Commented el 14 feb. 2017 a las 19:44
  • <td><a href="Controller/Action/@row.ProveedorId"> estoy llamando a un action de mi controller y llamando a otra vista que yo desee y estoy tomando el valor del id, verdad Commented el 14 feb. 2017 a las 20:12
  • así es, es la forma mas fácil que se me ocurre, otra es abrir un modal y llenar la informacion después de hacer una peticion ajax por lo que es un poco más complicado a mi parecer
    – JuankGlezz
    Commented el 14 feb. 2017 a las 20:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.