DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Beginner's question

Beginner's question

dconway34dconway34 Posts: 5Questions: 1Answers: 0
in Free community support

Hey folks,

Before we start, let's get out of the way that I have literally zero Javascript experience, so I'm sure the question I'm about to ask is pretty fundamental.

I'd like to make my columns sortable with null values on the bottom, regardless of whether it's sorted ascending or descending. I'm trying to use the solution found here. However, I have literally no idea what I'm doing.

Here's my code. When sorting by Core Word Count, the row for Fortuna Fortibus Favet should always appear last regardless of sorting direction. What have I done wrong? (Feel free to point out things that I have done wrong unrelated to my question!)

Thanks in advance...

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/absolute.js"></script>  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>


<script>
    var wordcount = $.fn.dataTable.absoluteOrderNumber(
        { value: '', position: 'bottom' } );

    $('#table_id').DataTable( {
        columnDefs:
            {
                targets: 2,
                type: wordcount
            }
    } );
</script>

<script>
$(document).ready( function () {
    $('#table_id').DataTable({"paging": false}
   );
} );

</script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
            <th>Core Word Ct.</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Arnold</td>
            <td>Cloelia: Puella Romana</td>
            <td>166</td>

        </tr>
        <tr>
            <td>Ash</td>
            <td>Camilla</td>
            <td>207</td>
        </tr>
                <tr>
            <td>Belzer & Pelegrin</td>
            <td>Fortuna Fortibus Favet</td>
            <td></td>

        </tr>
    </tbody>
</table>
</head>
<body>


</body>
</html>

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Check your browser's console for errors.

  • dconway34dconway34 Posts: 5Questions: 1Answers: 0

    Thanks for the reply. I didn't even know about the console...

    After resolving some syntax errors, it's telling me:

    "Uncaught TypeError: $.fn.dataTable.absoluteOrderNumber is not a function"

    I suppose I made some mistake in loading the files? How do I fix this?

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    edited August 2020

    Your code shows two sets of < script >< /script > tags.
    Put the contents of the first script into the second script, after your DT initialisation code
    $('#table_id').DataTable({"paging": false} );
    Then get rid of the first script.
    Not sure if that's all you need though - I haven't used that sorting plug-in.

  • dconway34dconway34 Posts: 5Questions: 1Answers: 0
    edited August 2020

    Thanks. I tried that, and I get the same error as above, plus this one:

    Uncaught TypeError: Cannot set property 'absoluteOrder' of undefined
    at absolute.js:158
    at absolute.js:61
    at absolute.js:63

    This is the code now:

    <html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/absolute.js"></script>  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>


<script>
$(document).ready( function () {
    $('#table_id').DataTable({"paging": false}
   );

var wordcount = $.fn.dataTable.absoluteOrderNumber(
        { value: '', position: 'bottom' } );

    $('#table_id').DataTable( {
        columnDefs:
            {
                targets: 2,
                type: wordcount
            }
    } );
    } );


</script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
            <th>Core Word Ct.</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Arnold</td>
            <td>Cloelia: Puella Romana</td>
            <td>166</td>

        </tr>
        <tr>
            <td>Ash</td>
            <td>Camilla</td>
            <td>207</td>
        </tr>
                <tr>
            <td>Belzer & Pelegrin</td>
            <td>Fortuna Fortibus Favet</td>
            <td></td>

        </tr>
    </tbody>
</table>
</head>
<body>


</body>
</html>
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    edited August 2020 Answer ✓ 
    <script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/absolute.js"></script> 

<script type="text/javascript" charset="utf8" 
      src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

    Load your DT script before your plug-in script.

    ALSO - missed this at first - you have two of these:

    $('#table_id').DataTable

    where you only want one.

    Your columnDefs should follow your "paging": false.

    ...
"paging": false, 
columnDefs:
...
  • dconway34dconway34 Posts: 5Questions: 1Answers: 0
    edited August 2020

    Thanks for your patience with me on this. No more console errors, so that's progress! But it's still not sorting right...

    Here's what I have now:

    <html>
<head>

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/absolute.js"></script>  


<script>
var wordcount = $.fn.dataTable.absoluteOrderNumber({
    value: '',
    position: 'bottom'
});


$(document).ready(function() {
    $('#table_id').DataTable({
        "paging": false,
        columnDefs: {
            targets: 2,
            type: wordcount
        }



    })
})

</script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
            <th>Core Word Ct.</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Arnold</td>
            <td>Cloelia: Puella Romana</td>
            <td>166</td>

        </tr>
        <tr>
            <td>Ash</td>
            <td>Camilla</td>
            <td>207</td>
        </tr>
                <tr>
            <td>Belzer & Pelegrin</td>
            <td>Fortuna Fortibus Favet</td>
            <td></td>

        </tr>
    </tbody>
</table>
</head>
<body>


</body>
</html>
  • dconway34dconway34 Posts: 5Questions: 1Answers: 0

    I figured it out! Just needed some square brackets:

            columnDefs: [{
            targets: 2,
            type: wordcount
        }]

    Thank you so much for your help!`

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    You're welcome.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.