DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

table.row( this ).data() is not working in java

table.row( this ).data() is not working in java

bux36bux36 Posts: 1Questions: 0Answers: 0
in Free community support

debugger and console showing message that table.row is not a function

Replies

  • bux36bux36 Posts: 1Questions: 0Answers: 0

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <!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">
    <title>Insert title here</title>

     <link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/select.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />

 <script src="assets/js/jquery.js" type="text/javascript"></script>
 <script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.buttons.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.select.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.editor.min.js" type="text/javascript"></script>

    </head>
    <body>

        <table id="subject" class="display">
    <thead>
        <tr>
            <th>Subject Id</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Subject Id</th>
            <th>Name</th>
            <th>Description</th>
    </tfoot>
    </table>
    var editor; var id; $(document).ready(function () { /* $('#subject tbody').on('click', 'tr', function () { id = this.id; alert(id); } ); */ editor = new $.fn.dataTable.Editor({ ajax : { url : "./SubjectController", type : "POST", data : ""+id+"" }, table : "#subject", idSrc: "subjectId", fields : [ { label : "Name", name : "name" }, { label : "Description", name : "description" } ] }); var table = $("#subject").dataTable({ dom : "Bfrtip", ajax : { url : "./SubjectController", type : "POST" }, rowId : "subjectId", serverSide : true, processing : true, columns: [ { "data": "subjectId" }, { "data": "name" }, { "data": "description" } ], select : true, buttons : [ { extend : "create" , editor : editor}, { extend : "edit" , editor : editor}, { extend : "remove" , editor : editor} ], "sPaginationType": "full_numbers" }); $('#subject tbody').on( 'click', 'tr', function () { alert( table.row( this ).data() ); } ); });

    </body>
    </html>

  • bux36bux36 Posts: 1Questions: 0Answers: 0

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <!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">
    <title>Insert title here</title>

     <link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/select.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
 <link href="assets/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />

 <script src="assets/js/jquery.js" type="text/javascript"></script>
 <script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.buttons.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.select.min.js" type="text/javascript"></script>
 <script src="assets/js/dataTables.editor.min.js" type="text/javascript"></script>

    </head>
    <body>

        <table id="subject" class="display">
    <thead>
        <tr>
            <th>Subject Id</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Subject Id</th>
            <th>Name</th>
            <th>Description</th>
    </tfoot>
    </table>
    var editor; var id; $(document).ready(function () { /* $('#subject tbody').on('click', 'tr', function () { id = this.id; alert(id); } ); */ editor = new $.fn.dataTable.Editor({ ajax : { url : "./SubjectController", type : "POST", data : ""+id+"" }, table : "#subject", idSrc: "subjectId", fields : [ { label : "Name", name : "name" }, { label : "Description", name : "description" } ] }); var table = $("#subject").dataTable({ dom : "Bfrtip", ajax : { url : "./SubjectController", type : "POST" }, rowId : "subjectId", serverSide : true, processing : true, columns: [ { "data": "subjectId" }, { "data": "name" }, { "data": "description" } ], select : true, buttons : [ { extend : "create" , editor : editor}, { extend : "edit" , editor : editor}, { extend : "remove" , editor : editor} ], "sPaginationType": "full_numbers" }); $('#subject tbody').on( 'click', 'tr', function () { alert( table.row( this ).data() ); } ); });

    </body>
    </html>

  • gyrocodegyrocode Posts: 126Questions: 6Answers: 30

    Use DataTable() to initialize your table instead of dataTable().

    For example:

    var table = $("#subject").DataTable({
   // ... skipped ...
});

    See more articles about jQuery DataTables on gyrocode.com.

  • allanallan Posts: 63,893Questions: 1Answers: 10,531 Site admin

    Yup:

    $("#subject").dataTable(

    is the issue. See the top FAQ :).

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.