How can I filter data in a table on table row click using jQuery?

Question

I have a table in my site and it has player names and servers. But I need them to be clickable, and needs to have filtering effect.

What I mean is, If you click on player name => the leaderboards will load again as usual and show the servers that the player plays.. and server name => the leaderboards will load again as usual and show the players that play on the server

Another Example: Now let assume I click on username of "ken". After i click on that, the leaderboards only show usernames "ken" and servers that "ken" plays on.

Note: Data from tables are fetch from external JSON file which is https://dayz-n-chill.herokuapp.com/getglobal

The Leaderboard image: image

My Script:

    function responseHandler(res) {
                res.forEach(function (row, i) {
                row.index = i + 1
                })
                return res
                }
    
                function ajaxRequest(params) {
                var url = 'https://dayz-n-chill.herokuapp.com/getglobal'
                jQuery.get(url, jQuery.param(params.data)).then(function (res) {
                params.success(res);
                console.log(res);
// this is what i tried so far
                 var x = $("td").text();
                    $("td").click(function () {
                        var rows = $("#tableBody").find("tr").hide();
                        rows.filter(":contains('$(this).text()')").show();
                       })
                    })
                 }
//

My HTML Code:

<table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest"
            data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">

            <thead class="thead-dark">
                <tr>
                    <th scope="col" data-field="index" data-sortable="true">Rank</th>
                    <th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
                    <th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
                    <th scope="col" data-field="Kills" data-sortable="true">Kills</th>
                    <th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
                    <th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
                    <th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>

Nimantha · Accepted Answer · 2021-11-06 17:43:52Z

I if understood you right, this is what your looking for:

jsonData = [
{"id":10615,"userName":"RareCanadian295","Kills":2900,"Deaths":989,"headshot":557,"killStreak":0,"serverName":"DZNC_L"},
{"id":10655,"userName":"thildas","Kills":2030,"Deaths":1222,"headshot":422,"killStreak":5,"serverName":"ArmedToTheTeeth"},
{"id":12408,"userName":"Hells-Angelmc","Kills":1297,"Deaths":701,"headshot":308,"killStreak":0,"serverName":"420HighlootDM"},
{"id":103647,"userName":"thildas","Kills":1141,"Deaths":489,"headshot":202,"killStreak":0,"serverName":"420HighlootDM"},
{"id":11142,"userName":"YunG_Legend420","Kills":1101,"Deaths":964,"headshot":171,"killStreak":7,"serverName":"DZNC_L"},
{"id":10613,"userName":"Hells-Angelmc","Kills":807,"Deaths":621,"headshot":105,"killStreak":0,"serverName":"ArmedToTheTeeth"},
{"id":68686,"userName":"XxDGKallDAY3xX","Kills":690,"Deaths":413,"headshot":110,"killStreak":3,"serverName":"NWAFBattleground"},
{"id":10621,"userName":"thildas","Kills":643,"Deaths":527,"headshot":129,"killStreak":5,"serverName":"DZNC_L"},
{"id":11513,"userName":"Hells-Angelmc","Kills":630,"Deaths":515,"headshot":140,"killStreak":0,"serverName":"420HighlootDM"},
{"id":10642,"userName":"rha84","Kills":583,"Deaths":476,"headshot":80,"killStreak":0,"serverName":"ArmedToTheTeeth"}];

fillTable(jsonData);

$("#tblPlayers").on("click", ".js-data", function() {
    
    var type = $(this).data("type");
    var value = $(this).data("value");
    
    filterData(type, value);
});

function resetFilter() {
    fillTable(jsonData);
}

function filterData(type, value) {
     
   var newJson = "";
   
   if(type == "userName") {
       newJson = jsonData.filter(function (el) {
          return el.userName == value;
         });
   }
   else if(type == "serverName") {
       newJson = jsonData.filter(function (el) {
          return el.serverName == value;
         });
   }
   
   //console.log(newJson);
   fillTable(newJson);
}

function fillTable(data) {
   
   var html = '';
   
   $("#tblPlayers tbody").empty();
   
   for(var item of data) {
       html += '<tr>' +
       '<td>' + item.id + '</td>' +
       '<td><a href="#" class="js-data" data-type="userName" data-value=' + item.userName + '>' + item.userName + '</a></td>' +
       '<td><a href="#" class="js-data" data-type="serverName" data-value=' + item.serverName + ' >' + item.serverName + '</a></td>' +
       '<td>' + item.Kills + '</td>' +
       '<td>' + item.Deaths + '</td>' +
       '<td>' + item.headshot + '</td>' +
       '<td>' + item.killStreak + '</td>' +
       '</tr>';
   }
   
   $("#tblPlayers tbody").append(html);
}

a {
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button onClick="resetFilter()">Reset Filter</button>
<br><br>
<table id="tblPlayers" class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest" data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">
  <thead class="thead-dark">
    <tr>
      <th scope="col" data-field="index" data-sortable="true">Rank</th>
      <th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
      <th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
      <th scope="col" data-field="Kills" data-sortable="true">Kills</th>
      <th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
      <th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
      <th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

Collectives™ on Stack Overflow

How can I filter data in a table on table row click using jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related