Jquery Preparation

1. ASP.NET
*
Guido Ticona Hurtado
guidoti@gmail.com

2. *
*Estructura árbol
*Elementos
*Texto
*Atributos
*Se pueden referenciar
*id, atributo, relación

3. *

4. *
*Librería JavaScript
*Simplifica tareas comunes JS
*Funcionalidad
*Administrar DOM
*Administrar Eventos
*AJAX

5. *
*En un archivo .js
*Con <script src=“” type="text/javascript >
*<script type="text/javascript"></script>
*$().ready(function() {
script Jquery
});

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

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

8. *
*Eliminacion .detach .empty .remove .unwarp
*Agregar .append .prepend .text
*Modificar .replaceWith

9. *
*.addClass .hasClass .removeClass
*$(this)
*$.closest

10. *
*.get()
*.post()
*.load()
*.ajax()

11. *
$.ajax({
type: "POST",
url: “/Cliente/Nombres”,
data: parametros,
success: función,
error: función,
complete: función,
beforeSend: función
dataType: json | text | html | xml
});
$.post $.get(
“/Cliente/Nombres”,
querystring,
funcion,
dataType
)
$(“selector”).load(
“/Cliente/Nombres”,
querystring,
funcion
)

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

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

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

15. *
$('#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."
}
},
});

16. *
$('#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;
}
});

17. *
public 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; }
}

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