DataTabls casos de uso

proyecto reciente para dibujar un gran número de tablas utilizadas en los DataTabls dibujo mesa, sintiendo particularmente útil. Hay unos pocos método muy común de grabarla.

1, render ():

(1) Acción: la solicitud a través de los datos para su posterior procesamiento, el método devuelve los datos se utilizan como datos DataTables uso final.

(2) parámetros: el render (datos, tipo, fila, Meta)
de datos: El valor actual de la célula;
tipo: tipo de datos - con estos valores: filtro, la pantalla, el tipo, Ordenar
consecutivas: toda la fila de datos

(3) de aplicación:
la conversión de los datos de origen en un hipervínculo:

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

2, createdcell

(1) la célula para permitir al operador crear un DOM de devolución de llamada: leer ajax datos de una fuente de datos o fuente de datos dom crear una función de devolución de llamada lleva a cabo por la célula. operación elemento de reposición dom de la célula.

(2) 参数: función createdCell (célula, CellData, rowData, rowIndex, colIndex)

(3) La aplicación del botón Añadir en la célula frontal :()

$("#example").dataTable({
	"columns": [
		{"data": "work",
		"createdCell": function(td, cellDate, rowData, row, col){
				$(td).prepand('<button type="button">前加</button>');  // 在单元格前添加按钮
				$(td).append('<button type="button">后加</button>');  // 在单元格后添加按钮
				$(td).css({"position": "relative"});  // 定位
			}
		}
	]
})

3, columnas 和 columnDefs

(1) columnas: la columna establece las propiedades de inicialización. Usar columnas para definir las columnas, entonces ésimo número, hay que definir varios meses (si no se especifica ninguna opción puede ser nulo)

禁止第一列参与过滤(此表格有5列，其他列由于不指定选项，则为null) 
$('#example').dataTable( {
  "columns": [
    { "searchable": false },
    null,
    null,
    null,
    null
  ]
} );

(2) columnDefs: definiciones conjunto de columnas de inicialización de propiedades
y parámetros columnsOption gusta, este parámetro permite especificar las opciones de configuración de las columnas, que se aplican a una o más columnas. A diferencia de necesidad columnsOption a ser definida para cada columna

Este parámetro es una matriz de objetos columnas definidas utilizando la opción columnDefs.targetsDT dice DataTables se define es que la columna, que puede ser el siguiente:

0 o un entero positivo - de izquierda a derecha, la columna 0 se inicia
un número negativo - de derecha a izquierda índice de la columna (-1 es el último)
una cadena - una cadena que coincide con el nombre de la clase y la columna de
cadena de caracteres "_all" - Todo fila

Además, los objetivos pueden especificar ambos varias columnas, acepta una matriz (como objetivos: [-1, -2])

// 应用场景一：在鼠标点击每一行时跳转到改行详情页
1、先给每一行添加class属性；
$("#example").dataTable({
	"columnDefs": [
		{
		"targets": "_all",  // 受影响咧
		className: "detail-control',  // 每列增加class属性
		"render": $.fn.dataTable.render.text()  // ？这行是干什么的？请指导的大神指导下
		}
	]
})
2、绑定点击事件
$("#example tbody").on("click", "td.detail-control", function(){
	var data = $("#example").row(this).data();  // 获取选中行的数据
	var data = $("example").row($(this).parents("tr")).data();  同上
	window.location.href="url=" + data.id;
})