Editor is not working .Hence new/Edit/Delete buttons are not showing

vijay.mandapati · August 2015

Please find the code given below and help me on fixing the buttons issue.because i want to perform the CRUD operations with datatable

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap Example</title>
 
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">
<link rel="stylesheet" type="text/css" href="http//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <style type="text/css" class="init">

    body { font-size: 140%; }

    </style>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>
        <script type="text/javascript" language="javascript" src="http//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>




<script>
$(document).ready(function() {
  
 var table= $('#dealerTabID').DataTable();

 var editor = new $.fn.dataTable.Editor(table);
 

var tableTools = new $.fn.dataTable.TableTools( table, {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
        ]
    } );
    $( tableTools.fnContainer() ).appendTo( '#example_wrapper .col-sm-12:eq(0)' );


} );
</script>


</head>
<body>
<form>
<table id="dealerTabID" class="table table-striped table-bordered display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>AAA</th>
                <th>BBBB</th>
                <th>CCCCC</th>
                <th>DDDDDD</th>
                <th>RRRRRR</th>
                <th>EEEEEE</th>
                <th>WWWWWW</th>
                <th>QQQQQ</th>
                <th>SSSSS</th>
                <th>AAAAA12</th>
                <th>TTTT</th>
                <th>UUUU</th>
                
            </tr>
        </thead>
  <tbody> 
 
 <tr>
    <td>111</td>
    <td>13</td>
    <td>22</td>
    <td>1</td>
    <td>44</td>
    <td>55</td>
    <td>66</td>
    <td>AAAAD</td>
    <td>N</td>
    <td>ASADDD</td>
    <td>ASSSS</td>
    <td>TX</td>
</tr>                       
 
 <tr>
    <td>222</td>
    <td>12</td>
    <td>33</td>
    <td>2</td>
    <td>55</td>
    <td>66</td>
    <td>77</td>
    <td>SASSAS</td>
    <td>N</td>
    <td>A12344</td>
    <td>qwqwe</td>
    <td>NV</td>
</tr>                       
 
 <tr>
    <td>333</td>
    <td>13</td>
    <td>44</td>
    <td>6</td>
    <td>55</td>
    <td>77</td>
    <td>1</td>
    <td>2334</td>
    <td>N</td>
    <td>wqw</td>
    <td>qqqqqqq</td>
    <td>TX</td>
</tr>                       
 
 <tr>
    <td>444</td>
    <td>13</td>
    <td>44</td>
    <td>6</td>
    <td>77</td>
    <td>77</td>
    <td>77</td>
    <td>admin</td>
    <td>N</td>
    <td>qwqqqq</td>
    <td>11111</td>
    <td>MI</td>
</tr>                       
 </tbody>
        <tfoot>
            <tr>
               <th>AAA</th>
                <th>BBBB</th>
                <th>CCCCC</th>
                <th>DDDDDD</th>
                <th>RRRRRR</th>
                <th>EEEEEE</th>
                <th>WWWWWW</th>
                <th>QQQQQ</th>
                <th>SSSSS</th>
                <th>AAAAA12</th>
                <th>TTTT</th>
                <th>UUUU</th>
            </tr>
        </tfoot>
    </table>



</form>

</body>
</html>

allan · August 2015

It looks like jquery.dataTables.min.js is being loaded twice. Remove the second one.

Also, you'll need to load TableTools before Editor (since Editor adds buttons to TableTools). This load order requirement will be resolve for v1.5, but is required at the moment.

Allan

vijay.mandapati · August 2015

Hi Allan,

I made changes and shown below

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap Example</title>
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <style type="text/css" class="init">

    body { font-size: 140%; }

    </style>

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="http//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>

<script>

$(document).ready(function() {

     
 var table= $('#dealerTabID').DataTable() 
 var tableTools = new $.fn.dataTable.TableTools( table, {

        sRowSelect: "os",

        aButtons: [

            { sExtends: "editor_create", editor: editor },

            { sExtends: "editor_edit",   editor: editor },

            { sExtends: "editor_remove", editor: editor }

        ]

    } );

    $( tableTools.fnContainer() ).appendTo( '#example_wrapper .col-sm-12:eq(0)' );
 
 var editor = new $.fn.dataTable.Editor(table);
  
} );

</script>

 

 

</head>

<body>

<form>

<table id="dealerTabID" class="table table-striped table-bordered display" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>AAA</th>

                <th>BBBB</th>

                <th>CCCCC</th>

                <th>DDDDDD</th>

                <th>RRRRRR</th>

                <th>EEEEEE</th>

                <th>WWWWWW</th>

                <th>QQQQQ</th>

                <th>SSSSS</th>

                <th>AAAAA12</th>

                <th>TTTT</th>

                <th>UUUU</th>

                 

            </tr>

        </thead>

  <tbody> 

  

 <tr>

    <td>111</td>

    <td>13</td>

    <td>22</td>

    <td>1</td>

    <td>44</td>

    <td>55</td>

    <td>66</td>

    <td>AAAAD</td>

    <td>N</td>

    <td>ASADDD</td>

    <td>ASSSS</td>

    <td>TX</td>

</tr>                       

  

 <tr>

    <td>222</td>

    <td>12</td>

    <td>33</td>

    <td>2</td>

    <td>55</td>

    <td>66</td>

    <td>77</td>

    <td>SASSAS</td>

    <td>N</td>

    <td>A12344</td>

    <td>qwqwe</td>

    <td>NV</td>

</tr>                       

  

 <tr>

    <td>333</td>

    <td>13</td>

    <td>44</td>

    <td>6</td>

    <td>55</td>

    <td>77</td>

    <td>1</td>

    <td>2334</td>

    <td>N</td>

    <td>wqw</td>

    <td>qqqqqqq</td>

    <td>TX</td>

</tr>                       

  

 <tr>

    <td>444</td>

    <td>13</td>

    <td>44</td>

    <td>6</td>

    <td>77</td>

    <td>77</td>

    <td>77</td>

    <td>admin</td>

    <td>N</td>

    <td>qwqqqq</td>

    <td>11111</td>

    <td>MI</td>

</tr>                       

 </tbody>

        <tfoot>

            <tr>

               <th>AAA</th>

                <th>BBBB</th>

                <th>CCCCC</th>

                <th>DDDDDD</th>

                <th>RRRRRR</th>

                <th>EEEEEE</th>

                <th>WWWWWW</th>

                <th>QQQQQ</th>

                <th>SSSSS</th>

                <th>AAAAA12</th>

                <th>TTTT</th>

                <th>UUUU</th>

            </tr>

        </tfoot>

    </table>

 

 

 

</form>

 

</body>

</html>

vijay.mandapati · August 2015

But it is not working , please look into this

allan · August 2015

Are there any errors shown in the console?

Can you give me a link to the page so I can debug it directly?

Allan

vijay.mandapati · August 2015

Hi Allan,

I do not have link , Please use the above code because it is static html. Please correct my code.

vijay

tangerine · August 2015

Allan already told you that Paid Support is available for urgent queries.

vijay.mandapati · August 2015

I am started using your api , please try it , i need to look for paid in future but not now. can you please any one work on this and provide your suggestions.

allan · August 2015

$( tableTools.fnContainer() ).appendTo( '#example_wrapper .col-sm-12:eq(0)' );

There is no example_wrapper element on your page since your DataTable uses a different ID. Try:

$( tableTools.fnContainer() ).appendTo( '#dealerTabID_wrapper .col-sm-12:eq(0)' );

If that doesn't work, then try using your web-browsers developer tools to confirm the selector that should be used.

Allan

Editor is not working .Hence new/Edit/Delete buttons are not showing

Editor is not working .Hence new/Edit/Delete buttons are not showing

Replies

Howdy, Stranger!

Categories

DataTables

Editor is not working .Hence new/Edit/Delete buttons are not showing

Editor is not working .Hence new/Edit/Delete buttons are not showing

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables