Don't know why one of my columns isn't sorting

aav

Hi, I'm new here (please bear with me!), website is http://www.oxfordbops.co.uk/ - all scripts are within the home document (ie only a little bit of stuff about the date down the bottom and the links to datatables). Not sure why my 'location' column isn't sorting. Any ideas? Thanks

allan

In your code for the DataTable you have:

{
            "sType": "price",
            "aTargets": [4]
}

That is setting the type of the Location column to be price. Maybe change the target to be -1 to target the last column in the table (right most).

As to why that sorting function isn't working - try adding console.log( parseFloat(x) ); just after you've calculated x. I suspect you will find that it shows NaN for a number of the rows which is the issue.

Allan

aav

Fabulous, thank you! Forgotten that I had to start with 0. Changed it to string, and the correct column number and works perfectly now. One more thing - is there any way to make the blank boxes in that same column come after the alphabetically arranged items?

allan

You'd need a sorting plug-in for that. This blog post might help in that regard.

Allan

aav

Ok. Will have a look. Regarding this post https://datatables.net/forums/discussion/9006/can-i-move-the-search-box-outside-the-containing-element

Where do I put in this line of code into the following?

This:
$('div.dataTables_filter').appendTo(#gs);

Into this:

.dataTables_filter {
   display: none;
}

.
.
.


<input type="text" id="gs"> <!--this is outside the table in a different div-->
.
.
.



function renderDate(data, type, full) {return moment(data, "DD/MM/YYYY").format("ddd, D MMM YYYY");}

$(document).ready(function() {

    $.fn.dataTable.moment('DD/MM/YY');

  $('#lots').DataTable({
      "bInfo":false,
"bPaginate":false,
        "bFilter": true,
        "aoColumnDefs": [{
            "aTargets": [1],
            "mData": "date",
            "mRender": renderDate
        }, {
            "bSortable": false,
            "aTargets": ["no-sort"]
        }], 
        "order": [
            [1, "asc"]
        ],
    });
});

allan

Where do I put in this line of code into the following?

Inside initComplete is probably best, but for a sync loaded table like yours (i.e. it is not ajax) you could just put it after the DataTables initialisation.

Allan

aav

Like this? When I put it where I have now, the table sorting function stops working. (Sorry, I've only just started learning javascript so jquery is even newer to me!)

$(document).ready(function() {

    $.fn.dataTable.moment('DD/MM/YY');

  $('#lots').DataTable({
      "bInfo":false,
"bPaginate":false,
        "bFilter": true,
        "aoColumnDefs": [{
            "aTargets": [1],
            "mData": "date",
            "mRender": renderDate
        }, {
            "bSortable": false,
            "aTargets": ["no-sort"]
        }], 
    
   
        "order": [
            [1, "asc"]
        ],

"initComplete": function() {
    $('div.dataTables_filter').appendTo(#gs);
  }
    });

allan

Yes, like that. That looks like it should work if you just make the #gs a string. At the moment your browser should be telling you that it is invalid Javascript (syntax error).

Allan

aav

Ok, still not working. I've made a test online so you can see it - http://test.oxfordbops.co.uk/

Thanks

allan

appendTo( "#gs" );

I don't actually see an element on the page with that id.

Allan

aav

element is an <input> in the first table

allan

Thanks - I see it now. However, you can't append a div to an input element.

If you want to use your own input element for the search - just have a keyup listener on it and use search(). That will be much easier than moving elements around!

Allan