0

So I'm trying to create a simple datatables project without the usage of their Server-side processing. I included the css, js and everything but still can't get it to work. This is what my code looks like:

HTML:

<table id="dataTableUsers" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
              <th>Full Name</th>
              <th>Nickname</th>
              <th>Email</th>
              <th>Contact</th>
              <th>Receipt</th>
              <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for r in results %}
            <tr>
              <td>{{r.first_name}} {{r.last_name}}</td>
              <td>{{r.nickname}}</td>
              <td>{{r.email}}</td>
              <td>{{r.contact}}</td>
              <td>
              <!--<a href="/user/receipt/{{r.accountID}}">View Receipt</a>-->
              <a data-backdrop="true" data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.accountID}}">View Receipt</a>
              </td>
              <td>

                {% if r.status == 0 %}
                  <a href="/user/{{r.accountID}}/activate">Activate</a>
                {% else %}
                  <a href="/user/{{r.accountID}}/deactivate">Deactivate</a> 
                {% endif %}

              </td>
            </tbody>
            </tr>
            {% endfor %}
          </table>

And in my php:

$app->get('/user/admin/:team', function($team) use($app) {
    $session = new \RKA\Session();
    if($session->logged_in) {
        if($session->type) {
            $db = new db();
            if($team == "all") {
                $results = $db->select("accounts");
            } else {
                $app->redirect('/user/admin/all');
            }
            $app->render('adminpage.html', array(
                'logged_in' => $session->logged_in,
                'type' => $session->type,
                'results' => $results
            ));
        } else {
            $app->redirect('/user/'.$session->logged_in);
        }
    } else {
        $app->flash('msg', 'Please log in first.');
        $app->flash('type', 'danger');      
        $app->redirect('/user/login');
    } 
});

Includes:

$(document).ready(function() {
    $('#dataTableUsers').dataTable();
} );
</script>
<link href="/assets/css/jquery.dataTables.css" rel="stylesheet">
<script src="/assets/js/jquery.dataTables.js"></script>

BTW, I am using slim framework and twig. I get all the data but can't get the datatables to work. The sorting, search and everything. I think I got the css design but I can't get the main datatables functions to work.

How can I make the datatables work without using their Server-side processing?

13
  • do you have add jquery library? Commented Jul 14, 2015 at 8:07
  • @BhavinSolanki Yes sir. Commented Jul 14, 2015 at 8:08
  • add class to table class="table no-more-tables dataTable" Commented Jul 14, 2015 at 8:09
  • 1
    what you mean exactly with 'i can't make it working'? is there any error? you get an unwanted behaviour? the issue is the style? do you have any technical info to share with us to solve...which issue? Commented Jul 14, 2015 at 8:19
  • 2
    Think I know why - you have malformed markup, </tr> after </tbody>, you need to swap those, i.e </tr></tbody>, dataTables can be very sensitive to malformed markup. Commented Jul 14, 2015 at 8:23

1 Answer 1

0

The code isn't working because of the positioning of my loop. The new html file now looks like this:

<table id="dataTableUsers" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
              <th>Full Name</th>
              <th>Nickname</th>
              <th>Email</th>
              <th>Contact</th>
              <th>Receipt</th>
              <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for r in results %}
            <tr>
              <td>{{r.first_name}} {{r.last_name}}</td>
              <td>{{r.nickname}}</td>
              <td>{{r.email}}</td>
              <td>{{r.contact}}</td>
              <td>
              <!--<a href="/user/receipt/{{r.accountID}}">View Receipt</a>-->
              <a data-backdrop="true" data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.accountID}}">View Receipt</a>
              </td>
              <td>

                {% if r.status == 0 %}
                  <a href="/user/{{r.accountID}}/activate">Activate</a>
                {% else %}
                  <a href="/user/{{r.accountID}}/deactivate">Deactivate</a> 
                {% endif %}

              </td>

            </tr>
           {% endfor %}
            </tbody>
          </table>

Before, my </tbody> tag is above my </tr> which is wrong. And I also moved the {% enfor %} below my </tr> tag. And now it does work.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.