<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/jQueryUI/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../js/datatables.min.css" />
<script type="text/javascript" src="../js/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src=‘../js/jQueryUI/jquery-ui.min.js‘></script>
<script type="text/javascript" src="../js/datatables.min.js"></script>
<title>datatable列格式化和数据绑定</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover"
id="example">
<thead>
<tr>
<th>昵称</th>
<th>技能</th>
<th>添加时间</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("#example").dataTable({
//"iDisplayLength":10,
"sAjaxSource": "http://dt.thtxopen.com/datatables/dataListCUrl.php",
//‘bPaginate‘: true,
"bDestory": true,
"bRetrieve": true,
//"bFilter":true,
"bSort": false,
//"bProcessing": true,
"aoColumns": [
{
"mDataProp": "name",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).addClass(‘inputTd‘).attr(‘id‘, ‘td_‘ + sData + ‘_‘ + oData.id);
}
},
{
"mDataProp": "job",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).addClass(‘selectTd‘).attr(‘id‘, ‘td_‘ + sData + ‘_‘ + oData.id);
//$(nTd).html("<select class=‘selectTd‘ id=td_"+sData+"_"+oData.id+"><option value="+sData+" selected>"+sData+"</option></select>");
}
},
{"mDataProp": "note"},
{"mDataProp": "date"}
],
"sDom": "<‘row-fluid‘<‘span6 myBtnBox‘><‘span6‘f>r>t<‘row-fluid‘<‘span6‘i><‘span6 ‘p>>",
"sPaginationType": "bootstrap",
"language": {
"url": "http://cdn.datatables.net/plug-ins/e9421181788/i18n/Chinese.json"
}
/* "fnDrawCallback": function (data, x) {
$(‘#example tbody td.inputTd‘).editable(‘editable.php‘);
$(‘#example tbody td.selectTd‘).editable(‘editableSelect.php‘,
{
loadurl: ‘json.php‘,
//data:{"10":"10","20":"20","30":"30"},
type: ‘select‘
//submit : ‘确定‘,
//submitdata: { _method: "post"}
});
} */
});
});
</script>
</html>
时间： 2024-10-12 12:27:25