Agregar datatable jquery a un gridview en ASP.NET usando visual studio 2013

Buenos días chic@s. Hoy les traigo un post a cerca de como agregar el plugin datatable de jquery a un grid view en ASP.NET. Comenzamos:

Lo primero es agregar el javascript de datatable al proyecto. Para eso usamos el nuget manager de visual studio 2013 y buscamos el plugin:




Una vez que seleccionamos esa opción , ponemos en la barra de busqueda " jquery datatable" y visual studio nos muestra el plugin, una vez encontrado , le damos click y le damos install (yo ya lo tengo instalado asi que solo me sale con un check verde).





Una vez instalado, a nuestro proyecto se le agregan las siguientes carpetas:





Estas carpetas contiene los script y los estilos que vamos a utilizar. Ahora lo primero que debemos hacer es hacer referencia al jquery, que ya viene cuando agregamos el bootsrap. (aqui les dejo un post donde sale como agregamos el jquery Agregar jquery). Cabe destacar también que debemos hacer la referencia de los script y estilos en un orden especifico, como sale a continuación:

(Nota: Recuerden que para hacer la referencia solo seleccionamos el script y lo arrastramos con el mouse hasta la hoja que contiene el html y lo colacamos justamente en la posición que se muestra en las imagenes siguientes.)
Primero hacemos la referencia al jquery:




Posteriormente hacemos la referencia al datatable jquery:




Finalmente agregamos la referencia del estilo del datatable:



Ahora que tenemos los script referenciados, usamos la siguiente función

     $(document).ready(function () {
              $(".sem").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
                  "bPaginate": true,
                 
                  "columnDefs": [{
                      "defaultContent": "-",
                      "targets": "_all"
                  }],
                  "bLengthChange": false,
                  "iDisplayLength": 5,
                  "bInfo": false,
                  "language": {
                      "sSearch": "Buscar",
                      "oPaginate": {
                          "sFirst": "Primero",
                          "sLast": "Último",
                          "sNext": "Siguiente",
                          "sPrevious": "Anterior"
                      }
                  }
              });
          });


La colocamos debajo del todo el código. (les dejare un link abajo con los archivos de ejemplo).

la parte que dice ".sem", es parte de la clase con la que referenciamos el gridview.




Como vemos, vinculamos la función datatable con el grid a través de la clase.

Una vez que realizamos esto , corremos el proyecto para verificar si funciono.





Como vemos la función se agrego exitosamente. abajo les dejo el link con el ejemplo.

ejemplo datatable jquery gridview


Muchas gracias por el tiempo que han dedicado a aprender mas. pasen buen dia.