Solved

Ajax datatable extended functionality

Posted on 2014-09-19
2
366 Views
Last Modified: 2014-09-26
Why don't the search, show x records, and sort by clicking on a column head work on this page?
0
Comment
Question by:Bob Schneider
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 40333468
because each time, the request is sent to the server with the new parameters :
- number of object to display (iDisplayLength set to 10)
- the page, from pagination (iDisplayStart 0,10,20)
- order (sSortDir_0 is desc or asc)

and lot of others described here : http://datatables.net/forums/discussion/291/pagination-totals-and-bserverside
your server need to return the right results following at least iDisplayLength,iDisplayStart and sSortDir_0 for column 0)

sEcho:1
iColumns:4
sColumns:,,,
iDisplayStart:0
iDisplayLength:10
mDataProp_0:0
sSearch_0:
bRegex_0:false
bSearchable_0:true
bSortable_0:true
mDataProp_1:1
sSearch_1:
bRegex_1:false
bSearchable_1:true
bSortable_1:true
mDataProp_2:2
sSearch_2:
bRegex_2:false
bSearchable_2:true
bSortable_2:true
mDataProp_3:3
sSearch_3:
bRegex_3:false
bSearchable_3:true
bSortable_3:true
sSearch:
bRegex:false
iSortCol_0:0
sSortDir_0:asc
iSortingCols:1

Open in new window

0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 250 total points
ID: 40336753
have a look at the documentation on how to control sorting:

https://datatables.net/development/sorting

I think you just want to use the built in sort (unless you want to give the end user complex sorting options. Otherwise just stick with the "type based" sort option. I'm only guessing here but I think the reason why it's not sorting is because you don't initialize the data table until AFTER options are selected. I would have a default set of data that loads when the page first loads (adds a better user experience as well). Using this example, try this for your code:

<script type="text/javascript">
     $(document).ready(function () {
        var categories = 0;
        var gender = '';
        var series = 0;

        $('#series,#categories,#gender').on('change', function () {
            categories = $('#categories').val();
            gender = $('#gender').val();
            series = $('#series').val();
            getData(series, categories, gender)
        });
 
        var dt = null;

       function getData(series, categories, gender)  {
            var url = '/series/results_array.asp?series_id=' + series + '&gender=' + gender + '&age_to=' + categories;
            if(dt) { 
                dt.fnSettings().sAjaxSource = url;
                dt.dataTable().fnDraw();
            }
            else {
                var settings = {
                    bServerSide:true, 
                    sAjaxSource:url, 
                    pagingType: "full_numbers", 
                    fnServerData: function(src, data, cb) {
                           $.post(src, data, cb, "json");
                    },
                    order: [[ 1, "desc" ]]
              };
              dt = $('#standings').dataTable(settings);
            }
       };       

    });
</script>

Open in new window


if this doesn't work, then you may need to initialize the datatable first, using code something along the lines of:

$(document).ready(function() {
    $('#standings').dataTable( {
        "order": [[ 1, "desc" ]]
    } );
} );

Open in new window


keep in mind the sort index starts at "1", not 0.  So try the first code block first and see if that gives you what you want.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question