Search

user a list of options that they can quickly

information in the autocomplete options list. This example is

with Ajax search for options. The initial JSON that

illustrate how the formatting options operate. The Updated date

is a list of options that you select from.

case the list of options for the site is

in the list of options for the field to

all the fast editing options of inline editing (i.e.

all the fast editing options of inline editing (i.e.

field type">select list of options, the options for which

When using dom-select, and you have [code]Test[/code], using [code].val()[/code] won't work. I fixed it by changing the return line from [code]return $('td:eq('+iColumn+') select', tr).val();[/code] to [code]return $('td:eq('+iColumn+') select option:selected', tr).val();[/code] There is a jQuery bug marked as wontfix, so they won't correct it.

Hi I tried to load a data table below the row on which it is clicked with ajax call aaData now I am facing a problem... I am not getting "next,previous" of pagination for the new table created dynamically . Can any one suggest a solution for this ??

am having dynamic drop downs on one column. if i type those text from drop down on search filed, is it possible to retrieve all rows that which dropdown has that text as selected. Tell me a way to do this.

Hi, I have few questions about the filtering mechanism. 1) Is it possible to avoid html code inside cell ? For exemple, I have some classes for span inside td's and it appears that dataTable search inside classes too. 2) Can we tell dataTable to add css style display:none to rows taht don't match search rather than remove them ? Thanks

Hello, Could zomeone help me? I would like to use the drilldown option like shown on: http://datatables.net/blog/Drill-down_rows On the page: http://www.datatables.net/ref#mRender you see that the hidden parts are expanded by default. How to change my code that the drilldowns are opened when the page is loaded? [code]   Product Naam Score Datum toegevoegd Beoordeling Bewerk Loading data from server   Product Naam Score Datum toegevoegd Beoordeling Bewerk $(document).ready(function() { var anOpen = []; var sImageUrl = "/admin_new/images/"; var oTable = $('#dt_gateway_log').dataTable( { "bProcessing": true, "bServerSide": true, "bStateSave": true, "fnStateSave": function (oSettings, oData) { localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) ); }, "fnStateLoad": function (oSettings) { var data = localStorage.getItem('DataTables_'+window.location.pathname); return JSON.parse(data); }, "sPaginationType": "full_numbers", "sResetImage": "/admin_new/images/reset.png", "oLanguage": { "sUrl": "/admin_new/js/libraries/i18n/jquery.dataTables.nl.js" }, "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alles"]], "aaSorting": [ [ 2, "desc" ] ], "aoColumns": [ { "mDataProp": null, "sClass": "control center", "sWidth": "20px", "bSortable": false, "sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'" id="open">' }, { "mDataProp": null, "fnRender": function ( o, val ) { return o.aData[1]; }, }, { "mDataProp": null, "fnRender": function ( o, val ) { return o.aData[2]; } }, { "mDataProp": null, "fnRender": function ( o, val ) { return '<input type="hidden" min="0" max="5" value="'+o.aData[3]+'" step="0.5" id="backing"><div class="rateit" data-rateit-backingfld="#backing" data-rateit-readonly="true"></div>'; }, "sClass": "align-top", "sWidth": "100px" }, { "mDataProp": null, "fnRender": function ( o, val ) { return o.aData[4]; }, "sClass": "align-top", "sWidth": "140px" }, { "mDataProp": null, "fnRender": function ( o, val ) { return nl2br(o.aData[8]); }, "bSortable": false, "sClass": "align-top" }, { "mDataProp": null, "fnRender": function ( o, val ) { var dt_edit = ''; dt_edit = '<span class="icon-wrap-fx"><a href="/admin_new/reviews/index.php?task=order&amp;id='+o.aData[0]+'&amp;productId='+o.aData[6]+'&amp;status='+o.aData[7]+'" class="tip-table" title="Bewerken"><span class="icon-block-color pencil-c">Bewerken</span></a></span>'; var dt_remove = ''; dt_remove = '<span class="icon-wrap-fx"><a href="/admin_new/reviews/index.php?delete='+o.aData[0]+'&amp;id='+o.aData[0]+'&amp;status='+o.aData[7]+'" class="tip-table" title="Verwijderen" onclick="return OverlayConfirmOnClick({ caller: this, message: \'Weet U zeker dat deze regel verwijderd moet worden?\', btn1: \'Ja\', btn2: \'Nee\' })"><span class="icon-block-color delete-c">Verwijderen</span></a></span>'; return dt_edit+dt_remove; }, "sClass": "align-center align-top", "sWidth": "70px", "bSortable": false } ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $(nRow).addClass('gradeA'); return nRow; }, "sAjaxSource": "/admin_new/connectors/php/server_processing.php?process=reviews&status=0&sMultiWords=1", "fnDrawCallback": function(oSettings, json) { $(".tip-table").tipTip({ edgeOffset: 1 }); $('.rateit').rateit(); } }); $('#dt_gateway_log td.control').live( 'click', function () { var nTr = this.parentNode; var i = $.inArray( nTr, anOpen ); $(anOpen).each( function () { if ( this !== nTr ) { $('td.control', this).click(); } }); if ( i === -1 ) { $('img', this).attr( 'src', sImageUrl+"details_close.png" ); $('img', this).attr( 'id', "close" ); var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); $('div.innerDetails', nDetailsRow).slideDown(); anOpen.push( nTr ); } else { $('img', this).attr( 'src', sImageUrl+"details_open.png" ); $('img', this).attr( 'id', "open" ); $('div.innerDetails', $(nTr).next()[0]).slideUp( function () { oTable.fnClose( nTr ); anOpen.splice( i, 1 ); }); } }); }); function fnFormatDetails( oTable, nTr ) { var oData = oTable.fnGetData( nTr ); var sOut = '<div class="innerDetails">'+ '<table cellpadding="0" cellspacing="0" border="0" style="padding-left:50px;">'+ '<tr><td class="align-top">Product:</td><td>'+oData[1]+'</td></tr>'+ '<tr><td class="align-top">Naam:</td><td>'+oData[2]+'</td></tr>'+ '<tr><td class="align-top">Score:</td><td><input type="text" min="0" max="5" value="'+oData[3]+'" step="0.5" id="backing_more"><div class="rateit_more" data-rateit-backingfld="#backing_more" data-rateit-readonly="true"></div></td></tr>'+ '<tr><td class="align-top nobr">Datum toegevoegd:</td><td>'+oData[4]+'</td></tr>'+ '<tr><td class="align-top nobr">IP adres:</td><td><span class="icon-wrap-ip"><a href="/admin_new/misc/lookupip.php?ip='+oData[5]+'&amp;nocache=1351663536" onClick="$.fn.colorbox({width:550, height:585, scrolling:false, iframe:true, href:$(this).attr(\'href\')}); return false;"><span class="icon-block-color compass-c"></span>'+oData[5]+'</a></span></td></tr>'+ '<tr><td class="align-top">Beoordeling:</td><td>'+oData[8]+'</td></tr>'+ '</table>'+ '</div>'+ '<script>$(\'.rateit_more\').rateit();<\/script>'; return sOut; } </script> [/code] greetings Michel

Is there a way to generate checkboxes for filtering on a column so you can filter on multiple strings?

****This issue is resolved, the column that I was testing had the same value so sorting naturally would not happen.. lol**** I'm having a problem with making any of the sType functional. When I add in the option for sType this will render the column not sortable when clicking in the header. [code] $('#div-datagrid table').dataTable({ "aoColumns": [ { "sWidth": "33%", "sClass": "center" }, { "sType":"num-html", "sWidth": "33%", "sClass": "center" }, { "sWidth": "33%", "sClass": "center" } ], "bJQueryUI": true, "sPaginationType": "full_numbers", "bAutoWidth": false, "aaSorting": [[1, "asc"]] }); [/code] I have all the plugins that will be used called from the bottom of the jquery.dataTables.js script. I have placed a alert in the num-html-asc function and it seems to be running through the function when called once for each row in the table. This sType function is being called but why is it not working? The data it is trying to sort is coming from a ASP data grid, each value is wrapped in a span. [code] 2005 [/code] Any help on this would be great as it is driving me nuts...

Hello! I need to configure my AJAX call with some extra params depending on column params settings (I would like to add some own params to definition) but cannot have an access to datatables config in fnServerData function where I create AJAX params. Please advise. Thank you, Grigory

Hi, Currently have a set up of 6 columns all with drop down select menus. The table is populated via php and sqlite and works fine and the save state lets you leave the page and return to the table with the same result as it was left. Next stage i want to be able to view the entire table again but because the save state only remembers the option that was saved in the select menus, i can no longer view the entire table. Either a way to repopulate each drop menu or a way to reset the save cookie so i end up at the beginning again would be great. Heres my code [code] (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='<select><option value=""></option>', i, iLen=aData.length; for ( i=0 ; i<iLen ; i++ ) { r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; } return r+'</select>'; } $(document).ready(function() { /* Initialise the DataTable */ var oTable = $('#example').dataTable( { "aaSorting": [[ 1, "asc" ]], "bAutoWidth": false, "bStateSave": true, "oLanguage": { "sSearch": "Search all columns:" } } ); /* Add a select menu for each TH element in the table footer */ $(".option").each( function ( i ) { this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) ); $('select', this).change( function () { oTable.fnFilter( $(this).val(), i ); } ); } ); } ); [/code]

I am using datatables to display inventory data from a mongodb instance (AJAX). I need a decent way to add/edit/delete records and jeditable really doesn't fit. What I'd prefer is a way to pull up a fairly detailed form, either as another page or some sort of popover, make my changes, then reload datatables. Does anyone have any good ideas/examples/code samples of something like this?