Search string and integer table javascript

Question

I encountered a problem again when I search for something it returns the first row table that is sorted when I type random letter and number it only displays the first row of the table. What seems to be wrong in this I added a sort on the heading. How can I correct this?

HTML

     <table id="mytable">
           <thead>
             <tr>
             <th id="date_distribution">Date of Distribution</th>
             <th id="semi_total" class = 'text-center'>Semi Total</th>
             <th>Action</th>
            </tr>
                </thead>
            <tr>
            <th>November 30 2017</th>
            <th>₱20,175.10</th>
            </tr>
             <tr>
            <th>December 15 2017</th>
            <th>₱19,838.20</th>
            </tr>
    </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

This is the code for the sort and the search

function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_date_distribution = 1;
var f_semi_total = 1;
$("#date_distribution").click(function(){
    f_date_distribution *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_date_distribution,n);
});
$("#semi_total").click(function(){
    f_semi_total *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_semi_total,n);
});

$("#search").on("keyup", function() {
    var value = $(this).val();

    $('#mytable tbody  tr').each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();
            var id2 = $row.find("td:nth-child(2)").text();

            if (id.indexOf(value) !== 0 && id2.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

moon · Accepted Answer · 2017-12-04 05:59:18Z

1

Since the input isn't expected(means you might type a capital letter or not), you should check the letter by using toUpperCase() and toLowerCase()

$("#search").on("keyup", function(e) {
    var value = $(this).val();
    
    $('#mytable tbody  tr').each(function(index) {
		$row = $(this);
		
		var id = $row.find("th:first-child").text();
		var id2 = $row.find("th:last-child").text();
		if(id.toUpperCase().indexOf(value.toUpperCase()) > -1 || id.toLowerCase().indexOf(value.toLowerCase()) > -1 || 
		    id2.indexOf(value) > -1){
		    $row.show();	
		}
		else {
			$row.hide();
			return;
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
       <thead>
         <tr>
         <th id="date_distribution">Date of Distribution</th>
         <th id="semi_total" class = 'text-center'>Semi Total</th>
         <th>Action</th>
        </tr>
            </thead>
    <tbody>
      <tr>
        <th>November 30 2017</th>
        <th>₱20,175.10</th>
      </tr>
       <tr>
        <th>December 15 2017</th>
        <th>₱19,838.20</th>
      </tr>
    </tbody>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

edited Dec 4, 2017 at 5:59

answered Dec 4, 2017 at 4:15

moon

6706 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Over a year ago

my bad supposed to be td not th

John Over a year ago

Thank you for your help! I have another question how can you search for the string of month it displays only on the first letter when you type the remaining it returns a blank and for the amount without the need for the comma

moon Over a year ago

Can you give me an example please?

John Over a year ago

when you type no for november it doesnt show november it display a blank

moon Over a year ago

@John Sorry, I've fixed it :)

Kavindra · Accepted Answer · 2017-12-04 04:03:54Z

1

You don't have tbody and td in your HTML. Also, loop through #mytable tr instead of #mytable tbody tr. Please check the updated code below.

function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_date_distribution = 1;
var f_semi_total = 1;
$("#date_distribution").click(function(){
    f_date_distribution *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_date_distribution,n);
});
$("#semi_total").click(function(){
    f_semi_total *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_semi_total,n);
});

$("#search").on("keyup", function() {
    var value = $(this).val();

    $('#mytable tr').each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();
            var id2 = $row.find("td:nth-child(2)").text();

            if (id.indexOf(value) !== 0 && id2.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
           <thead>
             <tr>
             <th id="date_distribution">Date of Distribution</th>
             <th id="semi_total" class = 'text-center'>Semi Total</th>
             <th>Action</th>
            </tr>
                </thead>
                <tbody>
            <tr>
            <td>November 30 2017</td>
            <td>₱20,175.10</td>
            </tr>
             <tr>
            <td>December 15 2017</td>
            <td>₱19,838.20</td>
            </tr>
            </tbody>
    </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

answered Dec 4, 2017 at 4:03

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

7 Comments

moon Over a year ago

The result isn't coming out. Did you even check your code?

Kavindra Over a year ago

@moon Yes I checked and it works properly. Feel free to run and check

moon Over a year ago

Maybe it's because of JSfiddle? Because it's not running properly :(

Kavindra Over a year ago

@moon There is no jsfiddle. Click on the 'Run code snippet' button and enter just 'D' and the second row will be shown which is December. Then try with the second column. make sure you copy paste the '₱' symbol.

moon Over a year ago

Live search usually should support a user to search for something regardless of capital/lower letters.

|

Collectives™ on Stack Overflow

Search string and integer table javascript

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related