JTable JQuery不显示记录

时间:2014-01-23 06:32:06

标签: mysql jquery-jtable

我使用JTable(JQuery)从数据库中显示某些记录,(数据库是MySQL) 我也使用JTable的createAction插入数据。我有3个字段,在JTable中显示日期。我面临的问题是为显示日期的字段添加Type:'date',jtable停止显示数据库中的记录。但是当我在字段中删除type:'data'时,它再次使用listAction开始显示数据。我不明白为什么会发生这种情况? 我希望创建表单以显示日期选择器,并希望日期显示在listAction中。

注意:我使用yyyy-mm-dd格式作为日期。当类型:'日期' dateApplied,startDate和endDate 字段中删除时,数据库中的以下代码列表记录。但是当类型:'date'出现在这些字段的代码中时,它无法显示记录。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%@ page import="java.util.ArrayList"%>
<%@ page import="daobject.*"%>
<!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=ISO-8859-1">
<link href="../css/metro/red/jtable.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="../js/jquery.jtable.js" type="text/javascript"></script>

<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="../css/calenderStyle.css" type="text/css">

<title>Leave Applications</title>
<script type="text/javascript">
    $(document).ready(function () {
        $('#StudentLeaveTableContainer').jtable({
            title: 'Leave Applications',
            actions: {
                    listAction: '/Final_Notebook/StudentLeaveCancelController?action=list',
                    createAction: '/Final_Notebook/StudentLeaveCancelController?action=create', 
                    deleteAction:   '/Final_Notebook/StudentLeaveCancelController?action=delete'          
            },

            fields: {
                To:{
                    title:'Application To',
                    create: true,
                    options: '/Final_Notebook/StudentLeaveCancelController?options=ApplicationTo',
                    list: false
                    },

                leaveId:{
                     key: true,
                     create: false,
                     edit: true,         
                     sorting: false,
                     list: false
                },
                name: {
                    title:'Name',
                    list: true,
                    create:false,
                },
                rollNo: {
                    title: 'Roll No',
                    width: '20%',
                    list: true,
                    edit:true,
                    create: false
                },
                leaveType: {
                    title: 'Type',
                    width: '20%',
                    options:{'personal':'personal','medical':'medical','other':'other'},
                    edit:false,
                    create: true,
                    list: true
                },
                leaveReason: {
                    title: 'Reason',
                    width: '30%',
                    type: 'textarea',
                    edit: false,
                    list: true,
                    create: true
                },
                dateApplied: {
                    title: 'Applied On',
                    width: '30%',
                    list: true,
                    create: true,
                    edit: true,
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                startDate: {
                    title: 'From Date',
                    width: '30%',
                    list: true,
                    create: true,
                    edit: true,
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                endDate: {
                    title: 'To Date',
                    width: '30%',
                    list: true,
                    create: true,
                    edit: true,
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                days: {
                    title: 'Total Days',
                    width: '20%',
                    edit: false,
                    create: true,
                    list: true
                },
                status: {
                    title: 'Status',
                    width: '20%',
                    list: true,
                    edit: false,
                    create: false,
                    options: {'0':'pending', '1':'Apprtoved', '2':'Rejected'}
                }
            }
        });
        $('#StudentLeaveTableContainer').jtable('load');
    });
</script>
</head>

<body>

<div style="width:70%;margin-right:20%;margin-left:20%;text-align:center;">
<h1>Leave Applications</h1>
<div id="StudentLeaveTableContainer"></div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

to display records try following:
   dateApplied: {
                title: 'Applied On',
                width: '30%',
                list: true,
                create: true,
                edit: true,
                type: 'date',
                displayFormat: 'yy-mm-dd',
               display: function (data) {
                        return data.record.<your-field-name>;
                    },
            },