Ajax datatable extended functionality

Why don't the search, show x records, and sort by clicking on a column head work on this page?
Bob SchneiderCo-OwnerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.