Tablesorter is not working with the table

Question

TableThis is my cshtml and js codes. I tried tablesorter plugin on other tables (justnormal tables with thead and tbody) and it was working. I think the problem is that there is no body inside of tbody tags because I add the body with JS and webapi , do you have any idea how can I fix it and sort this table? I am a beginner, so would appreciate any help or advice.

<head>
    <script src="lib/jquery/dist/jquery.js" asp-append-version="true"></script>
    <script src="js/jquery.tablesorter.min.js"></script>
    <link rel="stylesheet" type="text/css" href="~/css/theme.default.css">
</head>
    <h3>Branch Index</h3>
    <div id="branchIndex">
        <table class="table tablesorter mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp customTable" id="branchIndexTablee">
            <thead>
                <tr>
                    <th>Branch Name</th>
                    <th>Open Now</th>
                    <th>Number Of Assets</th>
                    <th>Number Of Patrons</th>
                </tr>
            </thead>
            <tbody id="branchess">
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function () {
            $('table').tablesorter({ sortList: [[0, 0]] });
        });
    </script>

js

const uri = 'api/BranchApi';
let branchess = [];

function getItems() {
    fetch(uri)
        .then(response => response.json())
        .then(data => _displayItems(data))
        .catch(error => console.error('Unable to get items.', error));
}

function _displayItems(data) {
    var table = jQuery(".tablesorter");
    table.tablesorter();


  const tBody = document.getElementById('branchess');
    tBody.innerHTML = '';

    data.forEach(item => {

    let tr = tBody.insertRow();
    let td1 = tr.insertCell(0);

    var a = document.createElement('a');
    var name = document.createTextNode(item.branchName);
    a.appendChild(name);
    a.title = item.name;
    a.href = "Branch/Detail/" + item.id;
    td1.appendChild(a);

    let td2 = tr.insertCell(1);
    let time = document.createTextNode(item.isOpen);
    td2.append(time);

    let td3 = tr.insertCell(2);
    let telephoneN = document.createTextNode(item.numberOfAssets);
    td3.appendChild(telephoneN);

    let td4 = tr.insertCell(3);
    let address = document.createTextNode(item.numberOfPatrons);
    td4.appendChild(address);

    });
    branchess = data;
}

xdeepakv xdeepakv · Accepted Answer · 2020-03-28T07:23:13

Typo: id has been assign to wrong place:

NOW:

<tbody >
   <tr>
      <td id="branchess"></td>
   </tr>
</tbody>

Expected:

<tbody id="branchess">
   <tr>
      <td ></td>
   </tr>
</tbody>

<!DOCTYPE html>
<html lang="en">

<head>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
   <link rel="stylesheet" type="text/css" href="~/css/theme.default.css">
</head>
<h3>Branch Index</h3>
<div id="branchIndex">
   <table
      class="table tablesorter mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp customTable"
      id="branchIndexTablee">
      <thead>
         <tr>
            <th>Branch Name</th>
            <th>Open Now</th>
            <th>Number Of Assets</th>
            <th>Number Of Patrons</th>
         </tr>
      </thead>
      <tbody id="branchess">
         <tr>
            <td></td>
         </tr>
      </tbody>
   </table>
</div>

<script>
   $(document).ready(function () {
      _displayItems([{
            id: 1,
            branchName: "Random",
            isOpen: true,
            numberOfAssets: 10,
            numberOfPatrons: 11
         },
         {
            id: 2,
            branchName: "Lost",
            isOpen: true,
            numberOfAssets: 10,
            numberOfPatrons: 11
         },
         {
            id: 3,
            branchName: "Found",
            isOpen: false,
            numberOfAssets: 10,
            numberOfPatrons: 11
         },
         {
            id: 4,
            branchName: "OK",
            isOpen: true,
            numberOfAssets: 10,
            numberOfPatrons: 11
         },

      ])
      $('table').tablesorter({
         sortList: [
            [0, 0]
         ]
      });
   });

   function _displayItems(data) {
      


      const tBody = document.getElementById('branchess');
      tBody.innerHTML = '';

      data.forEach(item => {

         let tr = tBody.insertRow();
         let td1 = tr.insertCell(0);

         var a = document.createElement('a');
         var name = document.createTextNode(item.branchName);
         a.appendChild(name);
         a.title = item.name;
         a.href = "Branch/Detail/" + item.id;
         td1.appendChild(a);

         let td2 = tr.insertCell(1);
         let time = document.createTextNode(item.isOpen ? 'OPEN' :  'CLOSED');
         td2.append(time);

         let td3 = tr.insertCell(2);
         let telephoneN = document.createTextNode(item.numberOfAssets);
         td3.appendChild(telephoneN);

         let td4 = tr.insertCell(3);
         let address = document.createTextNode(item.numberOfPatrons);
         td4.appendChild(address);

      });
      // branchess = data;
      var table = jQuery(".tablesorter");
      table.tablesorter();
   }
</script>

</html>

Tablesorter is not working with the table

1 Answers