Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

Ajax datatable extended functionality

Why don't the search, show x records, and sort by clicking on a column head work on this page?
0
Bob Schneider
Asked:
Bob Schneider
2 Solutions
 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now