CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatable
Kodaigan
Kodaigan

Reputation: 95

How to make dataTable work?

Yes. I'm quite green behind the ears when it comes to jquery. I've tried to keep away from it, but it seems it is needed for this type of work. Although some say you don't really have to.

Now, I got the extension from Editor - dataTables and implemented it into my HTML. My problem here is, that I cannot seem to get the table shown on the html on loading. Is it because the values are missing for the table? Or did I miss something, that I should have defined in the code to make it work?

JSFIDDLE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webbased WinCos</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.js"></script>
    <script type="text/javascript" src="js/dataTables.editor.js"></script>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>

    <script type="text/javascript">
      var editor = new $.fn.dataTable.Editor( {} );

      new $.fn.dataTable.Editor( {
      ajax:  '/api/staff',
      table: '#staff',
      fields: [
          { label: 'First name', name: 'first_name' },
          { label: 'Last name',  name: 'last_name'  },
          // etc
      ]
  } );

  $('#myTable').DataTable( {
      ajax: '/api/staff',
      dom:  'Tfrtip',
      columns: [
          { data: 'first_name' },
          { data: 'last_name' },
          // etc
      ],
      tableTools: {
          sRowSelect: 'os',
          aButtons: [
              { sExtends: 'editor_create', editor: editor },
              { sExtends: 'editor_edit',   editor: editor },
              { sExtends: 'editor_remove', editor: editor }
          ]
      }
  } );

    </script>

    <table id="myTable" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th width="18%">Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                </table>

  </body>
</html>

Upvotes: 1

Views: 2629

Answers (1)

Loyalar
Loyalar

Reputation: 2163

If you actually have a service at the /api/staff path, your issue is that you initialize the datatable before the DOM is ready. You need to wrap your DOM manipulating code in a 

$(document).ready(function() {
    //code here
});

otherwise it will not work.

For your example, the datatables seem to work just fine if you use the simplest variation of the DataTables call you can: 

$(document).ready(function() {
    $('#myTable').DataTable({
        ajax: '/api/staff',
    });
});

This example can be seen working at https://jsfiddle.net/jtoud32z/3/ - although it gets no result back from the /api/staff service, of course.

When you have this working, you can add the other parameters to the .DataTable call, like columns. Make sure to just add the parameters one by one, that way you learn what they each do. In your example you have copied the code directly from the example from their site, and changed the Ajax url. Change the parameters to work with your system instead. :-)

Upvotes: 4

Related Questions