Solved

Ajax datatable extended functionality

Posted on 2014-09-19
2
383 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

705 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