<%@ 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>