-2

I am using thymeleaf and I want to move my table rows based on it's value using Javascript or Jquery. If the values in is "BAD" delete that row from current table and move that row to the bad table. I don't have classes on the table because the <TD> is dynamically inserted using thymeleaf foreach: iterate.

Is it possible to do all this onload?

Image to show

I was attempting to duplicate and delete all rows with the first column that have value "BAD" and then inserted into a different table, but I am having trouble writing a script that looks for the first value.

Html

  <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">


    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--<meta http-equiv="refresh" content="1" />-->


     <link href="../static/css/style.css"
          th:href="@{css/style.css}" rel="stylesheet" type="text/css"/>
</head>
<body>


<div class="container">
    <div class="jumbotron">
        <h3 style="color:yellow;">
BAD/WARNING
</h3>
<h3>
APPLICATION PROCESSING MONITORING
</h3>
<table id="tablePmBad">
    <tr>
        <th> Status </th>
        <th> HostName </th>
        <th> Process Name </th>
        <th> Process Count </th>
    </tr>
    <tr>
        <td> BAD </td>
        <td> Host1 </td>
        <td> process1</td>
        <td> 0 </td>
    </tr>
</table>


<h3 style="color:green;">
GREEN/NORMAL
</h3>
<h3>
APPLICATION SERVER
</h3>
<table id="tablePmGreen">

<tr>
        <th> Status </th>
        <th> Host </th>
        <th> Cpu Memory </th>
        <th> App Memory </th>
        <th> Opt Memory </th>
    </tr>
    <tr th:each="datamem", iterStat : ${datalist}">
        <td th: "${datamem.status}"></td>
         <td th: "${datamem.host}"></td>
        <td th: "${datamem.cpuMem}"></td>
        <td th: "${datamem.appMem}"></td>
        <td th: "${datamem.optMem}"></td>

    </tr>

</table>


<h3>
 MONITORING
</h3>
<table id="tableMGreen">
    <tr>
        <th> Status </th>
        <th> HostName </th>
        <th> Process Name </th>
        <th> Process Count </th>
    </tr>

    <tr th:each="data, iterStat : ${countlist}">
        <td th: "${data.Status}"> </td>
        <td th: "${data.host}"> </td>
        <td th: "${data.pName}"></td>
        <td th: "${data.pcount}"></td>
    </tr>
</table>


<script src="../static/css/color.js" type="text/javascript" th:src="@{css/color.js}"></script>

    </div>

</div>    
</body>
</html>
JayC
  • 2,144
  • 8
  • 42
  • 77
  • This question is very vague. Some sample code would be a great addition. How do you generate those tables? How your data is shaped in the back? Would it make sense to sort your data by BAD/GOOD flag? – Nikolai Oct 25 '16 at 16:05
  • I would like to sort my data good/bad but I don't know how to do so with javascript or jquery. – JayC Oct 25 '16 at 17:03
  • How are you originally getting all of the server information? why not sort that all out server side instead of client side? – Adjit Oct 31 '16 at 15:48
  • @Adjit I am receiving these servers from a config file, and then connecting to a ssh to retrieve data to determine whether the status is bad or OK. It changes constantly so I couldn't do it on the server side. – JayC Oct 31 '16 at 15:53

2 Answers2

0

It's not a good practice to use static tables like you do.

I would suggest a couple of options. My personal choice would be to employ angularjs and use ngRepeat directive to iterate through your array of data and generate an HTML table. Here's a starting point for you: https://docs.angularjs.org/api/ng/directive/ngRepeat

Another option is if you are constrained to use jquery you can sort your data first

here's a good example: How to sort an array of objects with jquery or javascript

and then iterate through it in your javascript and add rows based on BAD flag somehow like this: 

$("#table").append("<tr><td>"+blah+"</td></tr>");
Community
  • 1
  • 1
Nikolai
  • 198
  • 1
  • 14
  • Hello Nikolai, I added where I am getting data from java, using thymeleaf. for each data in a loop I am creating a new row for it. – JayC Oct 26 '16 at 13:25
  • @Jackie, it would be considered nice of you for marking the answer as accepted should you find it as such. – Nikolai Nov 02 '16 at 10:10
  • I have yet to find the answer that fits my needs. I am trying to implement the functionality, Having trouble. – JayC Nov 02 '16 at 15:34
0

First, your HTML is partially bad formatted. You can't (shouldn't) reuse ID on several places. Use CLASS instead then.

Add these to <head>:

<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.3.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>

And this at the end, before </body>:

<script>
$(document).ready(function() {
  $('table').DataTable({
    "order": [[0, "asc"]]
  });
});
</script>

Now, $('table').DataTable will tell all <table> to be properly formatted and sorted on the first column, ascending.

For more info, on how to use DataTables: visit this site.

Update

My bad, forgot to add {} hugging the options. Full Plunker test here: https://plnkr.co/O1iedtYw4e8YpvlgPEcu

Anuga
  • 2,619
  • 1
  • 18
  • 27
  • I added your script into my code, the script src link between the head tag. and the the script $(document) before the

    . But nothing happened. Should I change my table ID to classes?

     – JayC Oct 31 '16 at 15:50
  • How can I do that automatically? like window.onload. or ? Do i must have to click on the header? – JayC Oct 31 '16 at 18:41
  • What no, the `code` within' `` does it when the page has loaded, is ready. If you visit the Plunker link and Launch the edior, you'll see the rows are "random" and then sorted. – Anuga Oct 31 '16 at 19:05
  • I added your code into my program, It doesn't seem to work like your example. I am using thymeleaf as the front end. – JayC Nov 14 '16 at 21:54