Search

Hello guys, I've implemented this example: http://datatables.net/release-datatables/examples/api/multi_filter_select.html Inside a table of mine which contains 8 columns. Everything is great excepting for the fact that inside the 1st column I have a text string linked to an .html page. When populating the dropdown menu that is displayed under that 1st column I see: TextString">TextString Inside that column I have: TextString The only thing that I've changed is: $(document).ready(function() { /* Initialise the DataTable */ var oTable = $('#example').dataTable( { "oLanguage": { "sSearch": "Search all columns:" } } ); Changed into: $(document).ready(function() { /* Initialise the DataTable */ var oTable = $('#example').dataTable( { "sPaginationType": "full_numbers", "iDisplayLength": 25, "oLanguage": { "sSearch": "Search all columns:" } } ); I've tried to add also: "aoColumns": [ { "sType": "html" }, { "sType": "string" }, { "sType": "string" }, { "sType": "string" }, { "sType": "string" }, { "sType": "string" }, { "sType": "string" }, { "sType": "string" } ], just after the 'iDisplayLength' parameter, but this didn't make any difference. What's wrong? Thanks, Mihai

I use data table plugin for my grid view it works fine for searching,sorting but i want searching like in the following link with jquery UI slider http://jiren.github.com/filter.js/filterjs.html and searching with check box but not getting idea how to do it when i change something in my code the slider gets disapear help me to get out of it please provide any working code here is my .aspx jquery code jQuery(document).ready(function($) { $(function(){ var options = { range: true, min: 500, max: 1000, values: [500, 1000], slide: function(event, ui) { min = ui.values[0], max = ui.values[1]; $("#amount").val("Rs." + min + " - Rs." + max); }, stop: function(event, ui) {//This event is triggered when the user stops sliding. oTable.fnDraw(); } } $("#slider-range").slider(options); min = $("#slider-range").slider("values", 0); max = $("#slider-range").slider("values", 1); $("#amount").val("Rs." + min + " - Rs." + max); }); $('#').dataTable({ "bJQueryUI": true, "bPaginate": false, "bLengthChange": false, "bFilter": true, "bSort": true, "bAutoWidth": false }); });

Hi, I use this jQuery plugin to make a list of all students on a school, this is a huge list. I was wondering if it would be possible to add a combobox containing all the values of the group collumn. Then if you select a group in that combobox you only get the students from this group. Is there a feature in Datatables that can be used to achieve this? Thank you, Jerodev.

Is it possible to have the search highlight the the first row that matches instead of only showing the rows that match?

Hi I am putting searchable text box above table body into thead node instead of tfoot. its working fine. when i add scrolling code datatable get messed up. please help.

hi alan, i tried to add selectbox for every th. this code worked but it just took variables on current page. i think its cause i used it in fnInitComplete. but if i moved it out from my datatables options. it just showed me only one null option for every selectboxes (function($) { /* * Function: fnGetColumnData * Purpose: Return an array of table values from a particular column. * Returns: array string: 1d data array * Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function * int:iColumn - the id of the column to extract the data from * bool:bUnique - optional - if set to false duplicated values are not filtered out * bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) * bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array * Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> */ $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) { // check that we have a column id if ( typeof iColumn == "undefined" ) return new Array(); // by default we only wany unique data if ( typeof bUnique == "undefined" ) bUnique = true; // by default we do want to only look at filtered data if ( typeof bFiltered == "undefined" ) bFiltered = true; // by default we do not wany to include empty values if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true; // list of rows which we're going to loop through var aiRows; // use only filtered rows if (bFiltered == true) aiRows = oSettings.aiDisplay; // use all rows else aiRows = oSettings.aiDisplayMaster; // all row numbers // set up data array var asResultData = new Array(); for (var i=0,c=aiRows.length; i<c; i++) { iRow = aiRows[i]; var aData = this.fnGetData(iRow); var sValue = aData[iColumn]; // ignore empty values? if (bIgnoreEmpty == true && sValue.length == 0) continue; // ignore unique values? else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; // else push the value onto the result data array else asResultData.push(sValue); } return asResultData; }}(jQuery)); function fnCreateSelect( aData ) { var r='', i, iLen=aData.length; for ( i=0 ; i<iLen ; i++ ) { r += ''+aData[i]+''; } return r+''; } $(document).ready(function() { var oTable=$('#example').dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "siparisler_serversidesorter.php", "fnInitComplete": function ( sSource, aoData, fnCallback ) { $("tfoot th").each( function ( i ) { console.log( oTable.fnGetColumnData(i)); this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) ); $('select', this).change( function () { oTable.fnFilter( $(this).val(), i ); } ); } ); } } ); });

Hi all If there a way to include empty fields when filtering - as in, when filtering on a keyword, also include empty fields in the results? Thanks in advance. Chris

Hello every one, I am very thanks full to datatable forum specially to Allen for this awesome plugin. I am using this plugin ,it works fine but i have to change the position of toolbar(show and search) to the top of the page in a header div element. Can Any one please guide me for this.

to add individual column filters using aoColumnDefs ext but

I want to use this Add-On but it dosn't work! here is my code example!! [code] function CreateProductTable(TableHeader, ProductTable) { var aColums = []; var aVisible = []; var aColumnIndex = []; if (TableHeader != null) { for (var i = 0; i < TableHeader.length; i++) { var jColums = { sTitle: '', sType: '', bVisible: true }; jColums.sTitle = TableHeader[i].Parameter; var iDatenTyp = TableHeader[i].DataType; switch (iDatenTyp.toUpperCase()) { case "char": case "1": //is a character jColums.sType = ''; break; case "number": case "0": //is a number jColums.sType = 'numeric-comma'; break; } var sColVis = TableHeader[i].ColumnVisible; if (sColVis.toLowerCase() == "false" || sColVis == "0") { aColumnIndex.push(i); } //jColums.bVisible = false; aColums.push(jColums); } jQuery('#CPH_content_HF_HiddenColumns').val(''); jQuery('#CPH_content_HF_HiddenColumns').val(aColumnIndex); if (TableHeader.length != 0) { jQuery('#tableproduct').dataTable({ "sScrollY": "200px", "bJQueryUI": true, "bLengthChange": false, //show entries //"sDom": 'FT<"clear">lftFrip', // p = bPaginate, i = bInfo, t = , r = "iDisplayLength": 20, "bPaginate": true, //"sPaginationType": "full_numbers", "bProcessing": true, "bSort": true, "bFilter": true, "bAutoWidth": false, "bDestroy": true, "bInfo": true, "aaSorting": [], "aaData": ProductTable, "aoColumns": aColums, //dynamic TableHeader "oLanguage": {}, "aoColumnDefs": [ //{ "bSearchable": false, "bVisible": true, "aTargets": [9] } ], "fnRowCallback": function (nRow, aData, iDisplayIndex) { for (var i = 0; i < aData.length; i++) { jQuery('td:eq(' + i + ')', nRow).attr('id', 'CellIndex_' + i + '_RowIndex_' + iDisplayIndex); jQuery('td:eq(' + i + ')', nRow).parent().attr('id', 'RowIndex_' + iDisplayIndex); } return nRow; }, "fnDrawCallback": function (nRow, aData, iDisplayIndex) {//reinitialisierung von funktionen jQuery('#progressbar_table').hide(); initTableProductClick(); } }) .columnFilter({ ######################## here are the problems ############################# }); //TableHeader they are invisible / var oTable2 = jQuery('#tableproduct').dataTable(); for (var i = 0; i < aColumnIndex.length; i++) { var iCol = aColumnIndex[i]; var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; oTable2.fnSetColumnVis(iCol, bVis ? false : true); } } } } [/code] Dosent understand what's wrong... please help me ...! Tank you Tank you ... best regards Alexander