javascript - Datatable with several input options

Question

My goal is: I would like to use datatable with multiple filtering options. for this purpose all files should be separated from each other (means that there is an html, js, php file) and read from a database. however, with my current code in js i get the error message: ReferenceError: $ is not defined

I'm new in this area, could someone have found a suitable manual for my application? everything on the internet has been coded into one or two files. I use also smarty.

My Files:

test.php

<?php
require_once './Smarty/libs/Smarty.class.php';
echo "<script src=\"javascripts/test.js?v=3\" type=\"text/javascript\"></script>";
echo "<script src=\"javascripts/jquery.js?v=3\" type=\"text/javascript\"></script>";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css\">";

$smarty = new Smarty();

$smarty->display('test.tpl');

test.js

$(document).ready(function() {
    $('#datatables-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "testHelper.php?action=listmovies",
            type: "post",
            datafilter: function(data){
                var json = jQuery.parseJSON(data);
                if (json.error){
                    console.log(json.error);
                }
            }
        },
        columns: [
            {"data": "test", "name": "test", "title": "Test"},
            {"data": "test2", "name": "test2", "title": "Test2"},
        ]
    });
} );

test.tpl

<main class="content">
    <table id="datatables-table" class="table table-striped table-hover" style="width:100%"></table>
</main>

testHelper.php

<?php
if($_REQUEST['action'] == "listmovies"){
    $data = array();


    $value['test1'] = utf8_encode("test1");
    $value['test1'] = utf8_encode("test1");
    $data[] = $value;

    $value2['test2'] = utf8_encode("test2");
    $value2['test2'] = utf8_encode("test2");
    $data[] = $value2;

    $return['data'] = $data;
    echo json_encode($return);
}

标签： javascriptphphtmldatatabledatatables