CODEWITHSUNDEEP
jqueryjspservletsjtable
user2380133
user2380133

Reputation:

unable to create jtable in jsp

hi i wanted to create a jtable in jsp and after a lots of google search i found this site as this site says i will have a default table but when i run it i get a blank page.please help me http://jtable.org/GettingStarted#ListAction

   <html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Include one of jTable styles. -->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />

<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: '/GettingStarted/PersonList',
                createAction: '/GettingStarted/CreatePerson',
                updateAction: '/GettingStarted/UpdatePerson',
                deleteAction: '/GettingStarted/DeletePerson'
            },
            fields: {
                PersonId: {
                    key: true,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });
    });
</script>
</head>
<body>
<div id="PersonTableContainer"></div>
</body>
</html>

Upvotes: 3

Views: 1491

Answers (2)

Akash Shinde
Akash Shinde

Reputation: 955

enter image description here

<html>
<head>

<script src="https://raw.github.com/akashshinde/project/master/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="https://github.com/akashshinde/project/raw/master/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<!-- Include one of jTable styles. -->

<link href="https://raw.github.com/akashshinde/project/master/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="https://raw.github.com/akashshinde/project/master/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />

<!-- Include jTable script file. -->
<script src="https://raw.github.com/akashshinde/project/master/scripts/jtable/jquery.jtable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#PersonTableContainer').jtable({
        title: 'Table of people',
        actions: {
            listAction: '/GettingStarted/PersonList',
            createAction: '/GettingStarted/CreatePerson',
            updateAction: '/GettingStarted/UpdatePerson',
            deleteAction: '/GettingStarted/DeletePerson'
        },
        fields: {
            PersonId: {
                key: true,
                list: false
            },
            Name: {
                title: 'Author Name',
                width: '40%'
            },
            Age: {
                title: 'Age',
                width: '20%'
            },
            RecordDate: {
                title: 'Record date',
                width: '30%',
                type: 'date',
                create: false,
                edit: false
            }
        }
    });
});
</script>
</head>
<body>
<div id="PersonTableContainer"></div>
</body>
</html>

Actually javascript files are not loading correctly in your jsp file so navigate .js files correctly in url,as I entered it in above code.

Just replace code with your code

Upvotes: 1

Eli
Eli

Reputation: 14827

Seem like you're not include jQuery library, try to put this before your jtable link:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
        type="text/javascript"></script>

Upvotes: 0

Related Questions