datatable.js(04)列子 

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

 

posted @ 2015-11-07 07:25  ComeOfCome  阅读(408)  评论(0)    收藏  举报