Datatables Non Server Side Joomla

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
        <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://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" >
            $(document).ready( function () {
                $('#employee-grid').DataTable();
            } );
        </script>

    </head>
    <body>
        <h3 align="center">
    Datatables Contoh
  </h3>

  <?php $db = JFactory::getDbo();

// Create a new query object.

$query = $db->getQuery(true);

// Select all records from the user profile table where key begins with "custom.".
// Order it by the ordering field.
$query->select($db->quoteName(array('id', 'nama', 'nik')));
$query->from($db->quoteName('#__form_contoh'));
//$query->where($db->quoteName('profile_key') . ' LIKE '. $db->quote('\'custom.%\''));
$query->order('id ASC');

// Reset the query using our newly populated query object.
$db->setQuery($query);

// Load the results as a list of stdClass objects (see later for more options on retrieving data).
$results = $db->loadObjectList(); ?>

            <table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nama</th>
                            <th>NIK</th>


                        </tr>
                    </thead>

                    <?php
                        foreach($results as $result){
                    echo "
<td>".$result->id."</td>
<td>".$result->nama."</td>
<td>".$result->nik."</td>


</tr>";
}
                        ?>
            </table>

    </body>
</html>