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
Post a Comment