CODEWITHSUNDEEP
jquerydatatables
Ming An
Ming An

Reputation: 155

Why is the Datatables plug-in not working?

I'm trying to use DataTable to build a table, and I found a DataTable's example online here:Example

Based on the example, I wrote my code MyTable:

<head>
 <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>

<body>
<div class="container">
<table id = "guestList" >
<thead>
<tr>
<th>Order#</th>
            <th>Qty</th>
            <th>Customer</th>
            <th>Order Date</th>
            <th>Ticket date</th>
            <th>Price</th>
            <th>Delivery Method</th>
            <th>Option</th>
        </tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">abf0c80</td>
<td style="padding: 10px;">2</td>
<td style="padding: 10px;">Ashukur </td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">10.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td>
</tr>
<tr>
<td style="padding: 10px;">abf0af9</td>
<td style="padding: 10px;">4</td>
<td style="padding: 10px;">Boris</td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">7.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td></tr>
<tr>
<td style="padding: 10px;">abf0b8b</td>
<td style="padding: 10px;">3</td>
<td style="padding: 10px;">Ashukur </td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">17.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td>
</tr>
</tbody>
</table>
</div>
</body>

Can someone check the code for me? I don't know why my code doesn't work.

Upvotes: 0

Views: 30

Answers (2)

Rylonian
Rylonian

Reputation: 306

You are missing a <td></td> in each one of your tbody rows.

Number of <td> in <tbody> needs to be equal to number of <th> in <thead>.

See an updated fiddle here: http://jsfiddle.net/q6164rfr/

Upvotes: 2

davidkonrad
davidkonrad

Reputation: 85578

Because you need to make the markup right. The number of <th>'s must match the number of <td>'s in each row. I.e

<div class="container">
    <table id="guestList">
        <thead>
            <tr>
                <th>Order#</th>
                <th>Qty</th>
                <th>Customer</th>
                <th>Order Date</th>
                <th>Ticket date</th>
                <th>Price</th>
                <th>Delivery Method</th>
                <th>Option</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px;">abf0c80</td>
                <td style="padding: 10px;">2</td>
                <td style="padding: 10px;">Ashukur </td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">10.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
            <tr>
                <td style="padding: 10px;">abf0af9</td>
                <td style="padding: 10px;">4</td>
                <td style="padding: 10px;">Boris</td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">7.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
            <tr>
                <td style="padding: 10px;">abf0b8b</td>
                <td style="padding: 10px;">3</td>
                <td style="padding: 10px;">Ashukur </td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">17.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

cleaned up fiddle -> http://jsfiddle.net/9hGym/200/

Upvotes: 1

Related Questions