CODEWITHSUNDEEP
jquerydatatable
Sigal Zahavi
Sigal Zahavi

Reputation: 1073

jQuery DataTable not displaying Show entries, Search and does not sort

This is the first time I am trying to use jQuery DataTable.

I read a lot of articles, but I can't make it work.

I hope someone can help.

I need to build a table that displays Rugby games scores. The table I am building should look like this:

<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="example">
<thead>
<tr>
<th>Match</th>
<th colspan="3">Results</th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<th>Team</th>
<th>Halftime</th>
<th>Final Score</th>
</tr>
<tr>
<td colspan="4">Match: AA</td>
</tr>
<tr>
<td></td>
<td>Team A</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td></td>
<td>Team B</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td colspan="4">Match: BB</td>
</tr>
<tr>
<td></td>
<td>Team A</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td></td>
<td>Team B</td>
<td class="center">1</td>
<td class="center">3</td>
</tr>
</tbody>
</table>

I want the user to be able to sort the columns: Match, Team, Halftime and Final Score.

The way my code is now, the user can't sort on anything. When I click on a column head its height grows and the sort arrows display but noting is being sorted.

I also get an alert error:

DataTables warning (table id='example'): Requested unknown parameter '1' from the data source for row 0

My actual table looks like this:

<table class="display dataTable" id="example" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
    <th colspan="1" class="ui-state-default" rowspan="2">
        <div class="DataTables_sort_wrapper">
            Match<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
    </th>
    <th rowspan="1" colspan="3" class="ui-state-default" style="text-align:center">Results
    </th>
</tr>
<tr>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">
            Team<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-s"></span></div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">Halftime<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
        </div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">Final Score<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
        </div>
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>

        PBHS vs St Stithians<br>
        24/03/2012
    </td>

</tr>

<tr>

    <td></td>
    <td>PBHS 1st</td>
    <td></td>
    <td>14</td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>

    <td>

        PBHS vs St Stithians<br>
        24/03/2012
    </td>
    ....

My jQuery code:

$(function() {
  $('#example').dataTable({
  bJQueryUI: true
 });
});

I include these two files on the page:

<link rel="stylesheet" href="/shared/jQuery/jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
<script src="/shared/jQuery/jquery.dataTables.js"></script>

Can someone please help?

Upvotes: 0

Views: 8863

Answers (2)

user3789888
user3789888

Reputation: 123

    $('#tblView').dataTable({                           
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "bDestroy": true,
       "bSort": true,
       "bFilter": true,
    });
<link href="~/Content/themes/base/demo_page.css" rel="stylesheet" />
<link href="~/Content/themes/base/demo_table_jui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery.js"></script>
<script src="~/Scripts/js/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/js/jquery.dataTables.js"></script>
<script src="~/Scripts/js/dataTables.tableTools.min.js"></script>

use this script file also

Upvotes: 1

Olivier Albertini
Olivier Albertini

Reputation: 694

Your problem is

HTML

    <tr>
        <td colspan="4">Match: AA</td>
    </tr>

Here it's another way where you can achieve the same thing : (maybe you can add some css :) )

DEMO

i modify your header for :

<thead>
    <tr>
        <th>Match</th>
        <th colspan="3">Results</th>
    </tr>
    <tr>
        <th></th>
        <th>Team</th>
        <th>Halftime</th>
        <th>Final Score</th>
    </tr>
</thead>

i added the match name for each row and with JavaScript i hide them and I groups together

i hope that it'll help you !

Upvotes: 0

Related Questions