JQUERYASP.NET

Guido Ticona Hurtadoguidoti@gmail.com

DOM Estructura árbol Elementos Texto Atributos Se pueden referenciar

id, atributo, relación

Arbol DOM

Jquery Librería JavaScript Simplifica tareas comunes JS Funcionalidad

Administrar DOMAdministrar EventosAJAX

Como usar Jquery En un archivo .js

Con <script src=“” type="text/javascript > <script type="text/javascript"></script> $().ready(function() {

script Jquery});

Selectores (“*”) (“#id”) (“.clase”) (“elemento”) (“.clase,elemento,#id”)

Jquery eventos .load .ready .unload .click .dblclick .hover .blur .change .focus .select .submit .resize .scroll .keydown .keypress .keyup

DOM Eliminacion .detach .empty .remove .un

warp Agregar .append .prepend .text Modificar .replaceWith

Jquery .addClass .hasClass .removeClass $(this) $.closest

Ajax con Jquery .get() .post() .load() .ajax()

Jquery Ajax

$.ajax({type: "POST",url: “/Cliente/Nombres”,data: parametros,success: función,error: función,complete: función,beforeSend: funcióndataType: json | text | html | xml});

$.post $.get( “/Cliente/Nombres”, querystring, funcion, dataType )

$(“selector”).load( “/Cliente/Nombres”, querystring, funcion)

Tablas jQuery Datatables www.datatables.net Jquery.dataTables.js Jquery.dataTables.themeroller.css $().dataTable();

DataTables $('#tabla').dataTable({ "bServerSide": true, "bJQueryUI": true, "sPaginationType": "full_numbers", "sAjaxSource": "" });

DataTables(cont…) $('#tabla').dataTable({ "bFilter": false, "bLengthChange": false, "bInfo": false, "bPaginate": true, "bSort": false, "sPaginationType": "full_numbers"});

DataTables(cont…) $('#tabla').dataTable({ "oLanguage": { "sZeroRecords": "No hay registros", "sLengthMenu": "Mostrando _MENU_ registros por pagina", "sInfo": "Mostrando _START_ / _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 to 0 of 0 registros", "oPaginate": { "sFirst": "Inicio", "sLast": "Ultimo", "sNext": "Prox.", "sPrevious": "Prev." } }, });

DataTables(cont…) $('#datatabla').dataTable({ "aoColumns": [{ "bSortable": false }, null, { "sTitle": “", "bSortable": true, "fnRender": function (o) { return '<a >aaa</a>' } }], "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) { $(nRow).attr("id", aData[0]); return nRow; } });

Parametros DataTablepublic class jQueryDataTableModel {public string sEcho { get; set; }public string sSearch { get; set; }public int iDisplayLength { get; set; }public int iDisplayStart { get; set; }public int iColumns { get; set; }public int iSortingCols { get; set; }public string sColumns { get; set; } }

Controlador return Json(new { sEcho = param.sEcho, iTotalRecords = tabla.Count(), iTotalDisplayRecords = tabla.Count(), aaData = datos});