Solved

Ajax datatable extended functionality

Posted on 2014-09-19
2
361 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 32

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now