Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 82226 articles
Browse latest View live
↧

fnScrollDraw slow in IE, possible fix inside

December 17, 2012, 3:51 pm
$
0
0
Using DataTables 1.9.4:

One of our tables was taking between 3-7 seconds to load in IE, and through the profiler we traced it down to css.get([width or height]) calls happening within fnScrollDraw (taking about 70% of the draw time). I found that $(nSizer).width() was being called in multiple places and simply preassigned it to a variable, which dropped the time for this issue from 3-6 seconds to 200ms.

Is there a reason why $(nSizer).width() needs to be calculated separately for each child? Our table still looks the same, but I want to make sure.

Thanks.
↧
Search

Checkboxes on an Editor Form - checkbox state is flipped

December 18, 2012, 11:58 am
$
0
0
Hi folks, I'm using the DataTables.net Editor. One of my fields is a checkbox, and I define it as such:

{
   "dataProp": "IsAssociated",
   "label":"Is assigned",
   "name":"IsAssociated",
   "type": "checkbox",
   "ipOpts": [
      {
         "label": "",
         "value": ""
      }
    ],
    "separator": ""
},
....

I'm loading my DataTable from an AJAX source. The JSON data coming across for this checkbox field is transmitted as "True" or "False" (not "1" or "0"). This is what my WCF service serializes a boolean as.

My problem is that in my Editor form, False values are giving the checkbox a checkmark, and True values do NOT have a checkmark. Can anyone tell me what might be wrong with my field declaration above? Or where else I might investigate?

From the docs, it looks like there can be multiple checkboxes that are mutually exclusive and used like radio buttons, but that's not what I'm trying to do. I just need to represent a boolean value. Thanks in advance!

Edit: Allan, we're doing a lot with DataTables.net, the Editor, and .NET (particularly with WCF services). Would you be interested in posting any of our basic examples for the .NET world? If so, let me know at rob _at_ ironhorsesoftware.com.
↧
↧

filter html by span tag inside td in datatables

December 19, 2012, 12:28 am
$
0
0
have an external dropdown form which have a values of correct and incorrect, whenever incorrect is chosen a ajax post will run and will generate a span inside td for incorrect values. What I need is that datatables should filter out incorrect by checking span inside td.

HTML:

<select id="filter">
 <option value="correct">Correct</option>
 <option value="incorrect">Incorrect</option>
</select>

//Data Tables
<table id="data">
<thead>
<tr>Word</tr>
</thead>
<tbody>
<tr><td>Cat</td></tr>
<tr><td>Dog</td></tr>
<tr><td><span="wrong-spelling">Dogr<td></tr>
</tbody>
</table>
JS:

$(document).ready(function(){
   var dtTable = $('#data').dataTable( {
    "sDom": '<"H"lr>t<"F"ip>',
    "bSort": false,
    "bAutoWidth": false,
    "iDisplayStart": 0,
    "iDisplayLength": 25,
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,

});



$("#filter").change(function(){
     //Ajax Post request to check spelling
  });
});
On #filter change, when incorrect is chosen it should only filter rows with span class wrong-spelling
↧

Filtered data on page load

December 18, 2012, 8:26 pm
$
0
0
Hi ,

I am using datatables with AJAX source and also using external column filters with dropdowns.
I would like to display filtered data on page load.
I tried to write it in fnInitComplete but it didn't helped , also tried fnReloadAjax.

So exactly my need is as follow.

When i load my page it should have data having Value A and i am trying to achieve this using dropdown filters.
It was working perfectly fine without AJAX but it is creating problem while using AJAX.
↧

<br> when exporting to xls/csv

November 7, 2012, 5:00 am
$
0
0
I'm using TableTools to export table to csv/xls without problems. I've got cells containing multiple lines separated by a <br> and I would like this functionality present in the exported file.

I've tried initialising with "sNewLine": "auto" and "sNewLine": "<BR>" but this doesn't give the wanted behaviour.

Is it even possible to do what I want?
↧
↧

fnReloadAjax wait for finish

December 19, 2012, 1:19 am
$
0
0
Hello Allan,

I need that the execution of the following alert, it will be after the fnReloadAjax, but when de alert appear, the fnReloadAjax not be finished.
How can I do If I want that the alert show when de fnReloadAjax finish please??

oTable.fnReloadAjax();               

alert('OK!!');
//I need here will be executed after fnReloadAjax
...
...
...

Thank you!
↧

Identifying rows when dragging and dropping

December 19, 2012, 1:19 am
$
0
0
I have a datatable where I have disabled sorting on all but one hidden column to allow me to control the order of rows. I am also using the jQueryUI 'sortable' plugin to allow users to drag and drop rows within the table. This all works quite nicely, but I have a couple of issues which I'm really struggling with.

I have some controls which get conditioned based on a selected row's position in the table. Specifically, if the row is the very first one in the table (not just the first one on a page), then I need to disable some stuff. I'm struggling to work out how I can tell if the selected row is the very first one in the table. Something like $("#table tbody tr:eq(0)") will work, but will also make report the first row on pages 2, 3, 4 etc of the table as being top due to the way that datatables hides unseen rows from the DOM. I can't use the datatables fnGetPosition API either as those positions don't seem to keep up to date with the changes introduced by any dragging and dropping of rows.

In a similar vein, when a user drags a row I need to work up or down the DOM to identify other rows related to it for various reasons. I need to be able to iterate over all rows in the table, but again the order needs to reflect any changes caused by dragging and dropping.

Does anyone have any bright ideas that might help?

Thanks,
Al.
↧

processing div hides before table is updated using fnReloadAjax

December 19, 2012, 2:19 am
$
0
0
I am using dataTable with server side processing enabled. While refreshing the table data using fnReloadAjax() method, the processing div hides(table still shows old data) and then after about 2 seconds new data appears in the table. Is there a way to hold the processing div till the new data is loaded in the table?
↧
Search

concatenate fields in select

December 19, 2012, 2:33 am
$
0
0
Hello,

It´s posible to do something like this?

$out['cambio_divisas'] = $db
                ->query( 'select', 'cambio_divisas' )
                ->get( 'id_moneda as value, moneda + " " + id_moneda as label' )                 
                ->order('id_moneda ASC')
                ->exec()
                ->fetchAll();

I need to put as a label of select two concatenated fields (moneda + " " + id_moneda), but this not works.

Thank you!
↧
↧

Searchfilter question

December 19, 2012, 3:00 am
$
0
0
Hallo,

Can somebody help me with the following: I would like that the searchfilter filters on any string/word in the search-field.
So that the search matches all words.

Is this possible?
thx
↧

Inline editing

May 31, 2011, 1:55 pm
↧

How to use parameter ROW in mRender function

December 19, 2012, 3:35 am
$
0
0
Hello,

I need to use a row parameter for access to second cell for this row. I try this, but it doesn´t works:

"mRender": function (val, type, row) {
                                    
                    var sReturn = "<span style='color:#000'>" + row[1] + "</span>";
                    return sReturn;
                }

How to use this parameter?
Thank you!
↧

Ajax loading issue

October 6, 2011, 3:30 am
$
0
0
Hi Allan,

I'm a noob to DataTables and I am in total awe of the amazing quality of it all. Thanks for all the amazing hard work.

I want to create a table dynamically from data from a server.

Essentially I want to do this except with json from a server:
http://datatables.net/examples/data_sources/js_array.html

I've successfully used the following technique (works perfectly!!):
            var candidatesDataTable;
            $(document).ready(function() {
                $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' ); 
                $.getJSON( '/demos/candidateDataTables.json', null, function( json ) {
                    candidatesDataTable = $('#example').dataTable( json );
                });

            });

However, I just cannot get the following to work:
            var candidatesDataTable;
            $(document).ready(function() {
                $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' ); 
                candidatesDataTable = $('#example').dataTable({
			"sAjaxSource": '/demos/candidateDataTables.json'
		});
            });

Both should be the exact same right?

I get the following error with the second version:
Uncaught TypeError: Cannot read property 'asSorting' of undefined

I've see a similar thread but I couldn't understand how it fully applies:
http://datatables.net/forums/discussion/3012/error-in-google-chrome/p1

Here is my json:
{
    "aaData": [     
["ANTRIM","19","32","49","156","17","159","0"],
["ARMAGH","2","10","4","19","2","8","0"],
["CARLOW","6","33","18","7","3","71","0"],
["CAVAN","10","67","20","7","6","59","0"],
["CLARE","17","56","47","7","16","104","0"],
["CORK","103","440","323","78","96","1115","0"],
["DERRY","5","14","11","47","5","34","0"],
["DONEGAL","23","103","44","38","20","154","0"],
["DOWN","21","91","34","40","14","122","0"],
["DUBLIN","543","1589","1478","272","485","6263","0"],
["FERMANAGH","0","5","0","6","0","1","0"],
["GALWAY","32","175","343","27","38","530","0"],
["KERRY","14","57","54","22","14","170","0"],
["KILDARE","31","146","73","22","24","339","0"],
["KILKENNY","10","56","27","7","13","128","0"],
["LAOIS","7","35","13","6","7","72","0"],
["LEITRIM","1","24","11","1","3","37","0"],
["LIMERICK","30","110","78","16","22","275","0"],
["LONGFORD","3","12","9","2","6","31","0"],
["LOUTH","5","31","18","11","6","66","0"],
["MAYO","28","68","49","9","14","120","0"],
["MEATH","17","75","58","20","16","231","0"],
["MONAGHAN","4","26","11","9","3","23","0"],
["OFFALY","5","22","17","5","2","54","0"],
["ROSCOMMON","5","21","13","4","3","44","0"],
["SLIGO","12","59","21","7","6","100","0"],
["TIPPERARY","14","74","46","15","15","161","0"],
["TYRONE","2","4","5","25","2","9","0"],
["WATERFORD","12","75","43","15","13","180","0"],
["WESTMEATH","3","18","13","2","2","33","0"],
["WEXFORD","13","49","42","18","13","172","0"],
["WICKLOW","15","54","47","10","11","194","0"],
["Ireland (County not specified)","226","892","646","197","162","2460","0"],
["Outside Ireland","30","59","75","22","14","295","0"],
["Unknown","630","1916","1936","932","571","7821","0"],
["Total","1898","6498","5676","2081","1644","21635","0"]
    ],
    
    "aoColumns": [
    {
        "sTitle": "Region"
    },
    {
        "sTitle": "Mary Davis"
    },
    {
        "sTitle": "Seán Gallagher"
    },
    {
        "sTitle": "Michael D. Higgins"
    },
    {
        "sTitle": "Martin McGuinness"
    },
    {
        "sTitle": "Gay Mitchell"
    },
    {
        "sTitle": "David Norris"
    },
    {
        "sTitle": "Dana Rosemary Scallon"
    }
    ]
}


Kind regards,
Rory
↧
↧

Call fnDraw synchronously

December 19, 2012, 1:20 am
$
0
0
hi allan,

I have following problem.
I am sending an ajax request (to server), and in response, i am refreshing the datatable using fnDraw. It was working fine until
I have a requirement to show a PDF. so after getting response from my ajax request, I am now refreshing the datatable and than
submiting a form to display a PDF.

Due to form submission, the fnDraw ajax request aborted, is there any way so that I call fnDraw method synchronously, and than POST the form.

Thanks
↧

fnDeleteRow matching rules

December 19, 2012, 4:34 am
$
0
0
I made a mistake in some code and it gave some strange behaviour.

This is the code:
	var selectedrows = document.querySelectorAll('.row_selected');
	console.log (selectedrows);
	console.log ( selectedrows.length + " rows to delete");
	// cycle through
	for ( var i = 0; i< selectedrows.length; i++) {
		// delete it
		oTable.fnDeleteRow( selectedrows[0], null, false );
	}
	oTable.fnDraw();

The mistake was that I had [0] in the loop and not [i]. I would expect it to delete the first row and then fail.
it didn't! I deletes multiple rows and not the ones required!
Why?
How does fnDeleteRow use a tr element to match to internal data structures?
↧
Search

fnReloadAjax issue

December 19, 2012, 2:40 am
$
0
0
Hi DataTables

Having a issue with fnReloadAjax where the table is not being refreshed. I have added the function "fnReloadAjax" in a seperate .js file and can debug trhough the code to see that it is actually gets to the function. But no referesh! any suggestions would be great


Here is my code

 
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "../services/users/users.asmx/getallusers",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $('#divquicksearch').html('<table cellpadding="0" cellspacing="0" border="0" id="quicksearchtable" class="responsive dynamicTable display table table-bordered"></table>');

            var data = jQuery.parseJSON(response.d);

            $('#quicksearchtable').dataTable({
                "bProcessing": true,
                "sDom": "'<'row-fluid'<'span3'l>RCTfrtip'",
                "bPaginate": true,
                "sPaginationType": "full_numbers",
                "aaData": data,
                "oColVis": { "buttonText": "Show / Hide Columns", "bRestore": true, "sRestore": "Revert Back", "activate": "click" },
                "oColReorder": { "iFixedColumns": 1 },
                "aoColumns": [
            { "mData": "0", "sTitle": "Employee Code", "bSearchable": true, "bVisible": true, "sWidth": "8%", "sClass": "cls-employeeID" },
            { "mData": "1", "sTitle": "Store Number", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
            { "mData": "2", "sTitle": "Name", "bSearchable": true, "bVisible": true, "sWidth": "15%" },
            { "mData": "3", "sTitle": "JobTitle", "bSearchable": true, "bVisible": true, "sWidth": "20%" },
            { "mData": "4", "sTitle": "Basic Hours", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
            { "mData": null, "sTitle": "Actions", "sWidth": "20%", "sClass": "user-actions" },
                        ],
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    //debugger;
                    $('td:eq(5)', nRow).html('<div class="controls center"><a class="tip" href="#" oldtitle="Edit task" title="" aria-describedby="ui-tooltip-8"><span class="icon12 icomoon-icon-pencil"></span></a><a class="tip user-delete" href="#" oldtitle="Remove task" employeename="' + aData[2] + '"  employeeID="' + aData[0] + '"><span class="icon12 icomoon-icon-remove "></span></a></div>');
                    $('td:eq(5)', nRow).attr('employeeID', aData[0]);
                }
            });

            $.pnotify({
                type: 'success',
                title: 'User Load',
                text: 'All Users Were Sucessfully loaded',
                icon: 'picon icon16 iconic-icon-check-alt white',
                opacity: 0.95,
                hide: true,
                history: false,
                sticker: false
            });
        },

        error: function (data) {
            $.pnotify({
                title: 'Error',
                text: 'There was an error deleteing thi user pplease contact a member of Store Systems',
                hide: false,
                icon: 'picon icon16 entypo-icon-warning white',
                opacity: 0.95,
                history: false,
                sticker: false
            });
        }
    });

    $('.user-delete').live('click', function () {

        var id = $(this).attr('employeeid');
        var employeename = $(this).attr('employeename');

        $('#userid').append(" " + employeename + " ?");

        $('#myModal').modal({ show: true });

        $('#confirmDeleteUser').live('click', function () {
            $.ajax({
                type: "POST",
                url: "../services/users/users.asmx/DeleteUser",
                data: '{"EmployeeCode": "' + id + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {

                    //debugger;

                    var oTable = $('#quicksearchtable').dataTable();                  

                    // Immediately remove the first row
                    oTable.fnReloadAjax();

                    $.pnotify({
                        type: 'success',
                        title: 'User Deleted',
                        text: 'The user ' + employeename + ' was sucessfully deleted',
                        icon: 'picon icon16 iconic-icon-check-alt white',
                        opacity: 0.95,
                        hide: true,
                        history: false,
                        sticker: false
                    });

                },
                error: function () {
                    $.pnotify({
                        type: 'error',
                        title: 'User Deleted',
                        text: 'The user ' + employeename + ' was sucessfully deleted',
                        icon: 'picon icon16 iconic-icon-check-alt white',
                        opacity: 0.95,
                        hide: true,
                        history: false,
                        sticker: false
                    });
                }
            });
        });
    });
});
↧

Create aoColumnDefs options with a loop

December 18, 2012, 2:56 pm
$
0
0
I'm treating the entire dataTable option as an object like so

var opt = {
				"sPaginationType": "bootstrap",
					"oLanguage":{
						"sSearch": "",
						"sLengthMenu": "Limit: _MENU_"
					},
				"aoColumnDefs": [
								 {"bVisible": false, "aTargets": ""	}					 
								 ]
			};

and then I grow the object by continually adding the options I want.


if($(this).hasClass('dataTable-tools')){
				opt.sDom= 'T<"clear">lfrtip';
				opt.oTableTools = {
					//"sSwfPath": "js/tableTools/swf/copy_csv_xls_pdf.swf"
					"aButtons": [
								 "print"
								]
				};
				
			}

This allows me to control the options with classes on the tables. So, I want to set a table attribute with a csv of column numbers to hide and feed that into my aTargets. The problem is I keep getting the warning:

DataTables warning (table id = 'DataTables_Table_0'): aTargets must be an array of targets, not a string

I'm feeding the csv to my javascript and pushing to my object like so:


if($(this).hasClass("dataTable-clickable")){
				
                                // this is a custom attrbute on my table that has hidden-cols='1,2,3,4'
				var hc = $(this).attr("hidden-cols");
				 var hc_array = hc.split(",");

opt.aoColumnDefs.push({"bVisible": false, "aTargets": [hc_array] });

}

The code below appears to work if I either hardcode a number or a variable for the aTargets:


var col = 1;
opt.aoColumnDefs.push({"bVisible": false, "aTargets": [col] });


How do I push an array into the aTargets?
↧
↧

How we get row count on row grouping

November 20, 2012, 11:07 pm
$
0
0
I want to show the count for rowgroup in the row header itself as like as the count shown in filtering and sorting
↧

"_fnFlashGlue" always triggered

December 19, 2012, 7:01 am
$
0
0
When I check the Javascript & Events which are fired in the background, the function "_fnFlashGlue" is fired indefinitely.
Looks like its trying to add the SWF to the button control.

File: TableTools.js : 1318

In my code, I'm not using any SWF for Table tool buttons.
How do I stop Datatables from invoking the function indefinitely?
And does this impact the performance of my page.

Thanks.
↧

control editor input format

December 16, 2012, 10:26 am
$
0
0
Hi All,

I am new to editor, here is a simple question, how to control the text input max length, I can not seem to find a document to mention this.

What I want is:
                   {
	                "label": "Code:",
	                "name": "code",
                        "type": "text",
                        "maxLength": "4"
	            }
is there a maxlength attribute available?

Thanks a lot.

Tiger
↧
Viewing all 82226 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>