Develop Reference

jQuery dataTables: Filter based on string

I have a table that is being populated by way of a repeater and I have added the relevant dataTable .css and .js to enable the plugin. This works fine and as expected. The issue I am having is how can I now enable a few 'filter buttons' which when clicked apply a string based filter to the table data. I can simulate what I want by using the actual Search Bar that you can enable, but I would prefer to have some anchor tags that serve as clickable buttons/filters to trigger this.
Example Table
ID : Type
----------
1 : Car
2 : Car
3 : Bike
4 : Bike
5 : Car
The javascript at the bottom of the page looks like this:
var table = $('#example').DataTable();
var filteredData = table
.columns( [0, 1] )
.data()
.flatten()
.filter( function ( value, index ) {
return value = 'Bike' ? true : false;
} );
I suspect there is an issue with how I am defining my search criteria, and in the example above this is attempting to set a filter on anything within columns 0 or 1 that contain the string 'Bike'.
Any help would be greatly appreciated.

Try this:
var table = $('#example').DataTable();
table.columns( [0, 1] )
.search('Bike')
.draw();
Reference: https://datatables.net/reference/api/column().search()

dropdownlist inside a for loop asp.net

to build a dropdownlist inside for loop :
<%
for (int i = 0 ; i < 3 ; i++)
{
%>
<ASP:Dropdownlist id="list" .... ></ASP:Dropdownlist
<%
}
%>
it would create three drop down list with the id = list
but how to get the value of the list from c# code behind
like :
string x = list.SelectedValue;
The Question is : how to specify which one of those list I want to select it's value ?
P.S :
- I need to build it in asp.net not code behind because its a table and so complicated
- without using a repeater

Add tbody through code behind (C#)

I use jquery DataTable in my MVC3 project. The table is dynamically generated through code behind. The only thing (so far) that I have troubles with, is the tbody.
I want to add a tbody section with ID, without any rows, from code behind.
I've been looking a lot, and the best thing I got is:
TableRow tb = new TableRow();
tb.TableSection = TableRowSection.TableBody;
tb.ID = "Body";
But that way, I get a row in the tbody section, with one row with the id..
What I want to get is:
<tbody id="Body"></tbody>
How can I get that result from code behind?
Thanks

Such thing is not possible with the generic Table control, it simply doesn't support giving ID to its <tbody>.
What you can do though is assign the desired ID as custom attribute of the table:
Table1.Attributes["data-tbodyid"] = "Body";
Then using jQuery assign this on the fly to the table's <tbody>:
$(document).ready(function () {
$("table").each(function () {
var tbodyId = $(this).data("tbodyid");
if (tbodyId && tbodyId.length > 0)
$(this).find("tbody").eq(0).attr("id", tbodyId);
});
});

I ended up using HtmlGenericControl:
HtmlGenericControl tb = new HtmlGenericControl("tbody");
tb.ID = grid.GridBodyName;
Of course, the table itself, the header, the footer and its cells should also be HtmlGenericControl.
Adding the body to the table, and the cells to the header\footer should be done that way:
HTMLTable.Controls.Add(tb);

How do I toggle the display for a dynamic id table?

I have a table that displays rows based on a drop down list option. The rows are dynamically created. I use the value on the ddl for the initial row, then a simple counter to make it unique. Is there a way to say something like show all the rows that start with "tableShoes" even though the rows are something like tableShoes1, tableShoes2, etc?
$('#itemSelect').change(function() {
var item = $('#itemSelect').val();
$('#itemList tr').each(function() {
$(this).hide();
});
$('#' + item + 'Header').show();
$('#' + item + '1').show();
//Because the table is dynamic, I am not sure how many
//rows would be available so I only see the first option.
});

I would suggest adding the same CSS class name to each row as it is added, perhaps the same as the value of the selected item. That way your last line could just be:
$('.' + item).show();
And you wouldn't have to worry about the index.

this selector shoud solve your problem: $('[id|=tableShoes]')

Populate textbox from checkbox list using ASP.NET and AJAX

I have a textbox control and a checkbox list control on my page.
I am first populating my checkbox list with a list of employee objects in the code-behind. An employee has an id and a name. Both are displayed in the checkbox list like so:
Jim (1)
Alex (2)
Gary (3)
When a user checks one of the boxes, the employee's name needs to be populated in the textbox. So if Jim is selected, the textbox value is "Jim". It also needs to support multiple values, so if Jim and Gary are selected, the textbox value is "Jim, Gary".
Also, if a user enters a valid value in the textbox, the correct employee should be checked. This needs to support names and id's. So if I enter "1,Alex" in the textbox and then click outside the textbox, Jim and Alex should be selected.
I'm using ASP.NET and I need to do this using AJAX, but I have no experience with using jQuery and AJAX. Could someone show me a simple example of how to do this?

Here is something I through together that might help get you started. It's not tested and not complete but I don't have time to do it all right now, so thought this might help. There definitely needs to be a lot more checks and paring done that I left out for you to implement.
$(function() {
// gets all checkbox items by a common class you will put on all of them
$('.checkboxlistclass').click(function(e) {
var txt = $(this).text();
var employeeName = txt; // change this to parse out the name part and remove the id
var currentTxtVal = $('#textboxid').val();
var newVal = currentTxtVal + ',' + employeeName; // check if you need the comma or not
$('#textboxid').val(newVal);
});
// textboxid is the id of the textbox
$('#textboxid').change(function(e) {
var textboxVal = $(this).val();
// split on the comma and get an array of items
// this is dummy data
var items = [];
items.push('Jim');
items.push(2);
// go through all the items and check if it's a number or not
// if it's a number do a selection based on the id in parenthesis
// if not then check first part for name match
for (var i=0; i < items.length; i++) {
if (isNaN(parseInt(items[i])) {
$(".checkboxlistclass:contains('" + items[i] + " ('").attr('checked', true);
}
else {
$(".checkboxlistclass:contains(' (" + items[i] + ")'").attr('checked', true);
}
}
});
});