javascript - Filter table hiding rows with JS -



javascript - Filter table hiding rows with JS -

i have table in razor:

<table id="tblcaseteam"> <thead> <tr> <th> </th> <th style="width: 30em;"> @html.displaycolumnnamefor(model, m => m.action) </th> <th style="width: 7em;"> @html.displaycolumnnamefor(model, m => m.owner) </th> <th style="width: 7em;"> @html.displaycolumnnamefor(model, m => m.deadline) </th> <th style="width: 15em;"> @html.displaycolumnnamefor(model, m => m.status) </th> <th style="width: 15em;"> @html.displaycolumnnamefor(model, m => m.completed) </th> </tr> </thead> <tbody> @foreach (var item in model) { <tr> <td> @html.actionlink("edit", "edit", new { id = item.id }) </td> <td> @html.displayfor(modelitem => item.action) </td> <td> @html.displayfor(modelitem => item.owner) </td> <td> @html.displayfor(modelitem => item.deadline) </td> <td> @html.displayfor(modelitem => item.status) </td> <td> @html.displayfor(modelitem => item.completed) </td> </tr> } </tbody> </table>

with ddl has 3 values, completed, , incomplete. lastly column of table boolean displayed in table checkbox.

i'm looking js filters rows (hide , show) depending on selection of ddl if "all" show all. if "complete" show rows finish value true in lastly column. if "incomplete" show rows finish value false in lastly column.

i tried jquery cant find out how it

$table.find("tr").hide().filter(function () { homecoming xxxx }).show();

my ddl:

<div id="dropdownlist"> @html.dropdownlist("filter", new selectlist(viewbag.searchoptionslist, "value", "text")) </div>

and code know selected value:

var sel = $("#filter option:selected").text();

question 2: possible to, instead of js filtering, client side filtering model, putting clause in table model depending on value of ddl. table going refresh accordingly?

thank you

you

<tbody> @foreach (var item in model) { <tr class='@item.completed ? "complete" : "incomplete"'>

then on drop downwards like

$( "#dropdownlist" ).change(function() { if ($( ).val() == 'complete'){ $(".incomplete").hide(); $(".complete").show(); } else if ($( ).val() == 'incomplete'){ $(".incomplete").show(); $(".complete").hide(); } else { $(".incomplete").show(); $(".complete").show(); } });

javascript jquery asp.net-mvc-3 razor html-table

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -