Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all 1816 articles
Browse latest View live
↧

Regular expression (with reserved characters) for filtering with OR selection

July 4, 2013, 6:22 am
$
0
0
I am implementing an solution with Datatable. In this solution there's one column which contains values like: --, - , 0 , + and ++ . This is a representation of postive, neutral or negative values.

An custom filter should be added to filter this column on multiple values. For this I have created an multiple selection but I can't get the regular expression working.

For example: I want to filter al rows which contain the (exact matching) value + OR ++.

The examples/forum say that an OR can be created by using a regular expression. It should be something like:

var filter = '+|++'
oTable.fnFilter(filter, 2, true);

The + is a 'special character' in regular expressions so this has to be escaped in some kind of way. Normally it would be done by placing an \ but this doesn't work.

Could somebody give me some hints or help?
↧
Search

Sorting a checkbox column

July 4, 2013, 8:28 am
$
0
0
I'm using this great plugin for my tables. I want to sort by a column that is a checkbox. Reading the info and some posts I did this:

In my view page (mvc) I've 12 columns where the 12th is a check box.

Here is how a Init my table:

<script type="text/javascript">
  
  $(document).ready(
        $('table').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                { "sSortDataType": "dom-checkbox" }]
        })
        );


</script>

I'm also using this for the sorting:

	$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
	    var aData = [];
	    $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
	        aData.push(this.checked === true ? "1" : "0");
	    });
	    return aData;
	};

When I try to sort that column, I receive the following error:

DataTables warning: (table id='table'): Returned data sort array (col11) is the wrong length. I can't solve it. Help!
↧
↧

Can We create dynamic column

July 5, 2013, 5:51 am
$
0
0
Hi,

For my current project I need to have a table but with the column functionality inverted. Can we create dynamic column, so we can make a call from data table and it returns column value .. Do you have any example for same ?

Thanks,

Sharad
↧

Not able to display HTML inside every TD of DataTable

July 5, 2013, 10:43 am
$
0
0
I'm using CK-Editor to store the HTML formatting inside the database, while retrieving DataTable is not able to show the data.

i have already used below code and its working only if there is Anchor tag inside TD:

$.fn.dataTableExt.aTypes.push(
function (aData) {
return 'html';
}
);

With Regards,
Irfan
↧

Sorting on checkbox cols

July 5, 2013, 5:48 pm
$
0
0
Hi,

I used the examples on this page http://datatables.net/examples/plug-ins/dom_sort.html
in my application to sort columns containing check-boxes and select options.

Specifically I'm using: "sSortDataType": "dom-checkbox", "aTargets": [ 6, 7, 8, 9 ]
in aoColumnDefs in a table.

This worked in Datatables 1.9.1, but now I've upgraded to 1.9.4 the code seems broken.
I have walked through it in a debugger & see the aData array seems to be correctly built
and returned, but there is no re-sort after the function completes. Appears as though there
is no refresh (fnDraw needed somewhere?)..

Any help appreciated ...

S.
↧
↧

How to preserve the rows of the datatable even after page refresh.

July 7, 2013, 9:41 pm
$
0
0
Hi all,
I need to know a way in which we can retain the added rows of the datatable even after page refresh.I tried using "bStateSave": true but that doesnt seem to work.Following is my html page and the debugger link is http://debug.datatables.net/ezezog



<html><head>
<script type="text/javascript" src="C:/Users/212/Documents/JQUERY/DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script>
<script type="text/javascript" src="C:/Users/212/Documents/JQUERY/DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<style type="text/css" title="currentStyle"> @import "C:/Users/212/Documents/JQUERY/DataTables-1.9.4/DataTables-1.9.4/media/css/demo_table.css";</style>
<script>
$(document).ready( function () { $('#table_id').dataTable({"bStateSave": true});
$('#submit').click(addrow);
} );

function addrow() {
$('#table_id').dataTable().fnAddData( [
$('#empid').val(),
$('#fname').val(),
$('#lname').val()
] );

}
</script>
</head>
<body>
EmpId:<input type="text" id="empid" name="empid"><br>
First name: <input type="text" id="fname" name="fname"><br>
Last name: <input type="text" id="lname" name="lname"><br>


<input type="button" value="add" id="submit" />
<table id="table_id" class="display"> <thead>
<tr> <th>emp ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead>
<tbody>

</tbody></table>
</body>
</html>

Can anyone provide me suggestions in this regard,Thank you in advance.
↧

PHP Server Side DOM Example

July 7, 2013, 10:18 am
↧

Datatable stop working on using column show hide functionality

July 8, 2013, 1:17 am
$
0
0
Hi,

I'm newbie and was quite happy working with datatables until stuck with below problem.

I'm constructing HTML table dynamically from json received via ajax. After building the HTML table I'm binding it to the datatables with below code:



$("#tblSearchResults_" + instanceId).dataTable({ "bDestroy": true, "bFilter": false, "iDisplayLength": 20, "sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "",
"sZeroRecords": "Nothing found - sorry",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"

}
});

I have a requirement to show/hide table columns dynamically based on user input, when i do so(show/hide works fine) as depicted by code below

var oTable = $("#tblSearchResults_" + instanceId).dataTable();
bVis = oTable.fnSettings().aoColumns[arr[i] - 1].bVisible;
oTable.fnSetColumnVis(arr[i] - 1, bVis ? false : true);

After show hide, It stops rebinding data again when i rebuild HTML table from json received via service and bind it to datatables (only works on first load)

* There is no issue with the HTML table format that I build

Any help would be much appreciated.

Many thanks
↧
Search

Pagination links not shown correctly

July 8, 2013, 7:17 am
$
0
0
Hello,

I have a datatable with default style but my pagination links look all wrong.
They look like this:
http://ruben.preview.sanmax.be/Knipsel.PNG
This is my code (please don't mind the PHP code inside it):

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered bootstrap-datatable" id="table">
	<thead>
		<tr>
			<th>Gebruikersnaam</th>
			<th>E-mail</th>
			<th>Naam</th>
			<th>Laatst ingelogd</th>
			<th>Rechten</th>
			<th>Acties</th>
		</tr>
	</thead>
	<tbody>
		<?php if($this->members):?>
		<?php foreach($this->members as $member): ?>
			<tr>
				<td><?php echo $this->escape($member->getUsername());?></td>
				<td><?php echo $this->escape($member->getEmail());?></td>
				<td><?php echo $this->escape($member->getFullName());?></td>
				<td><?php echo $this->escape($member->getDateFirstUse());?></td>
				<td><?php foreach($member->getGroups() as $g): echo $g->getName();?><?php endforeach;?></td>
				<td class="center" style="width: 250px;">
					<?php if($canActivate):?>
						<a class="btn <?php if($member->getActive()):?>btn-success<?php else:?>btn-danger<?php endif;?>" href="<?php
								echo $this->url(array('controller' => 'member', 'action' => 'activate', 'id' => $member->getId()));
								?>" rel="tooltip" title="Activate">
							<i class="icon-refresh icon-white"></i> <?php if($member->getActive()):?>Deactiveer<?php else:?>Activeer<?php endif;?>
						</a>
					<?php endif;?>
					<?php if($canEdit): ?>
						<a class="btn btn-info" href="<?php
								echo $this->url(array('controller' => 'member', 'action' => 'edit', 'id' => $member->getId()));
								?>" rel="tooltip" title="Edit">
							<i class="icon-edit icon-white"></i> Edit
						</a>
					<?php endif;?>
					<?php if($canDelete):?>
						<a class="btn btn-danger" onclick="showDialog('#dialog', '<?php echo $this->url(array('controller' => 'member', 'action' => 'delete', 'id' => $member->getId()))?>');" rel="tooltip" title="Delete">
							<i class="icon-trash icon-white"></i> Delete
						</a>
					<?php endif;?>
				</td>
			</tr>
		<?php endforeach;?>
		<?php endif;?>
	</tbody>
</table>

<?php $this->headScript()->captureStart(); ?>
$('#table').dataTable();
<?php $this->headScript()->captureEnd(); ?>

I'm pretty new to using datatables.
↧
↧

Show/Hide row

July 8, 2013, 7:20 am
$
0
0
Hello,

First off, I know I can use the $.fn.dataTableExt.afnFiltering in order to add filtering to a datatable but that's an issue for me.

Basically I have a table with hundreds of rows and about 10 columns. This is a very dynamic table as it will get updated asynchronously via a websocket connection. I receive one message for each row in the table and based on it's info I update those specific cells with new text and data-attributes. This happens every 30 seconds per row.

Now I'd like to hide some rows based on certain data-attributes that get updated via websockets and the way I found so far would be to push a function to $.fn.dataTableExt.afnFiltering that will filter the table. In order for this to work I would need to redraw the table every time a new message arrives. If I do this I will kill my browser because messages can arrive 10-50 every second.

Another option would be to simply hide the row if needed when a message arrives. If it needs not be hidden, I can just leave it be and save up a lot of system resources but I couldn't find such a function.

Any idea on how could I achieve this? Maybe some hidden datatables call that's not in the docs?

Thank,
Oktav

P.S. When redraw occurs I loose focus on some input fields in a special row that's always visible, making it basically impossible to use.
P.P.S I can't link to any code because of the complex nature of this setup (websockets...)
↧

Sorting only by visible columns

July 7, 2013, 10:53 pm
$
0
0
I probably read almost every thread I could find here but still did not succeed to solve my issue. I hope I am not missing anything obvious :)

I implemented Server-Side rendering. I am showing only 5 columns while the response contains 6 columns. I am using 1 column to render one table column. As such for example when I click on the 4th column it sorts by the 3rd column. I understand I can do something with fnVisibleToColumnIndex but I did not understand where and how I put it.

My jquery:
 
		$(document).ready(function() {
			$('#tablesorter').dataTable({
				"sPaginationType": "full_numbers",
				"aaSorting": [[ 4, "asc" ]],				
				"bProcessing": true,
				"bServerSide": true,
				"sAjaxSource": "query.php",				
				"aoColumns": [				
						{
							"mRender": function ( data, type, row ) {
								return '<a href="' + data + '"><img src="' + row[1] + '"/></a>';
							},
							"aTargets": [ 0 ]
						},										
						{ "mData": 2 },
						{ "mData": 3 },
						{ "mData": 4 },
						{ "mData": 5 }											
						
						]					
			});						
	 
		} );

If I understand correctly all I need to do is to implement the following:
$.fn.dataTableExt.oApi.fnVisibleToColumnIndex = function ( oSettings, iMatch )
{
    return oSettings.oApi._fnVisibleToColumnIndex( oSettings, iMatch );
};

I would appreciate any hint on where and how should I put it if it is the right direction at all.
↧

print scrollable datatable.

July 7, 2013, 10:49 am
$
0
0
im using datatables along with the table tools. Ive got everything to work just fine except that i cannot for the life of me print a datatable that includes a scroll on it. So i onther words i have code like this.
oTable = $("#" + ParseTable).dataTable({
                //"bFilter": true,
                "sScrollY": "250px",
                "bScrollCollapse": true,
                "bPaginate": false,
                "bAutoWidth": false,
                "bRetrieve": true,
                "bSortClasses": false,
                "sDom": 'T<"clear">lfrtip'
            });

the 
"sScrollY": "250px",
takes my table with 1000 records and makes it scrollable. My problem is that when i use the print button the scrollable part does not go away in the example on the page is examples page is appears that it does?. Is there anything else i should be doing?
Any help would be greatly appreciated.
Miguel
↧

Datatable Empty

July 8, 2013, 5:36 pm
$
0
0
I am trying to populate a DataTable with an AJAX query that returns JSON.
I am trying to duplicate the example shown at:

http://www.datatables.net/release-datatables/examples/ajax/objects.html

What happens is that the data never shows up in the table. I also do not see anything firing in the console that would reach out to the url defined as sAjaxSource. 

                       $(document).ready(function() {
				var oTable = $('#userList').dataTable( {
					"bRetrieve": true,
					"bProcessing": true,
					"sAjaxSource": "/index.php?controller=identity&action=getUserListFull",
					"aoColumns": [
						{ "mData": "firstName" },
                                                { "mData": "lastName" },
						{ "mData": "userEmail" },
						{ "mData": "cellPhone" },
						{ "mData": "addressLineOne" }
						
					]
				} );
			} );
↧
↧

Horizontal scroll bar is not working

July 9, 2013, 8:15 am
$
0
0
I have add in datatable following parameter, but i didnot get horizontal scroll bar. My table has 35 columns in it. Now it is showing without scroll, its occupying whole window. I am followed the guideline which is mentioned in documentation. but nothing work. I am using datatable 1.9.4.

jQuery(document).ready(function($) {
var oTable = $('#tabela_controller').dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : "http://localhost/project/index",
"bFilter": false,
"bLengthChange":false,
"sPaginationType": "full_numbers",
"bProcessing" : true,
"iDisplayLength":2,
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "post",
"url" : "http://localhost/project/index",
"data" : aoData,
"success" : fnCallback
});

},
"sScrollX": "50%",
"bScrollCollapse": true,
});


Please help
↧

Showing 1 to NaN of NaN entries (filtered from NaN total entries) error

July 9, 2013, 2:30 pm
$
0
0
Hi Allan,

I am new to the community. New to Jquery as well. I have been working on JQuery since last 2 months and since then I have been using Datatables. This is an awesome plugin, works great. But I have one issue, my application has currently 218 rows and the number keeps increasing daily. Currently on IE8 it takes about 35 secs to load all the rows, hence I set bServerSide to true which resulted in displaying all the data in a single page and displays Showing 1 to NaN of NaN entries (filtered from NaN total entries). I tried all the solutions mentioned in this forum but none worked. I greatly appreciate your help in this regard. Thanks a lot in advance
↧
Search

How to prevent memory leak when using Jquery - datatables (ie7)?

February 18, 2013, 4:19 pm
$
0
0
I am using datatables in my Javascript application but when rendering the DOM, memory of IE grows up like anything. Memory doesn't come down even after clearing the datatatables element from DOM.

I have multiple tabs and i remove the LI part of the DOM to remove the tab which host the datatable.

If I dont render the DOM via datatables, the utilized memory is very less..

var functionLoad=(function (datasource){
        var oTable = $("#" + elementId).dataTable({})
});

Can someone let me know the best way to prevent memory leaks when using IE7?

Is there a way to remove reference of table element?
↧

SCRIPT5007: Unable to get value of the property 'style': object is null or undefined

July 10, 2013, 10:12 am
$
0
0
I have implement the following Datatable which is working fine on all browsers except IE7/IE8.

I get the following Error:
SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
jquery.dataTables.min.js, line 78 character 277

I am very new to Datatables and looking on the web I can not see anything obvious



$(document).ready(function () {
        var rowData = [];
        var jobTable = $("#jobDataTable").dataTable({
            "sDom": '<"H"l>rt<"F"ip>',
            "bServerSide": true,
            "sAjaxSource": '@Url.Action("GetKJListHandler", "Job")',
            "bProcessing": true,
            "bJQueryUI": true,
            "bStateSave": true,
            "bPaginate": true,
            "bSort": true,
            "rowHeight": "auto",
            "sPaginationType": "full_numbers",
            "aoColumns": [
                {
                    "mDataProp": null,
                    "sDefaultContent": "",
                    "bSortable": false,
                    "sWidth": "30px",
                    "fnRender": function (obj) {
                        return "<span id=sparkline" + obj.aData.ChartID + "></span>";
                    }
                },
                {
                    "mDataProp": "ID",
                    "fnRender": function (oObj) {
                        var jobUrl = '@Url.Action("View", "Job")';
                        var jobID = oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp];

                        return "<a href='" + jobUrl + "/" + jobID + "'>KJ" + jobID + "</a>";
                    }
                },
                {
                    "mDataProp": "Name",
                    "sWidth": "40%"
                },
                {
                    "mDataProp": "Status",
                    "bSortable": false
                },
                {
                    "mDataProp": "TotalSubJobs",
                    "sClass": "textalign-center"
                },
                {
                    "mDataProp": "Client",
                    "sWidth": "20%"
                },
                {
                    "mDataProp": "PlannedFTPDate",
                    "fnRender": function (obj, val) {
                        return FormatJSONDate(val);
                    }
                },
                {
                    "mDataProp": "StartedDate",
                    "bSortable": false,
                    "fnRender": function (obj, val) {
                        return FormatJSONDate(val);
                    }
                },
            ],
            "fnPreDrawCallback": function (oSettings) {
                rowData = [];
            },
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                rowData.push(aData);
            },
            "fnDrawCallback": function (oSettings) {
                for (var i = 0; i < rowData.length; i++) {
                    jobTable.$("#sparkline" + rowData[i].ChartID).sparkline([
                        rowData[i].PendingSubJobs,
                        rowData[i].SubJobsOnTime,
                        rowData[i].LateStageSubJobs,
                        rowData[i].SubJobsOnHoldOrErrored,
                        rowData[i].CompletedSubJobs],
                        {
                            type: "pie",
                            height: 30,
                            borderWidth: 2,
                            borderColor: "#E1E1E1",
                            sliceColors: ["#EBEBEB", "#07D507", "#F93B3B", "#C143C1", "#9C9C9C", "#1972EF"],
                            tooltipFormat: "<span style='color: {{color}}'>&#9679;</span> {{value}} {{offset:names}} {{percent.1}}%",
                            tooltipValueLookups: {
                                names: {
                                    0: "Pending Sub Jobs",
                                    1: "SubJobs On Time",
                                    2: "Late Sub Jobs",
                                    3: "Sub Jobs On Hold/Errored",
                                    4: "Completed Sub Jobs",
                                    5: "Voided Sub Jobs"
                                }
                            }
                        });
                }
            }
        });

        $("thead input").keyup(function () {
            jobTable.fnFilter(this.value, $("thead input").index(this));
        });
    });
↧
↧

data tables loading time is too much

July 10, 2013, 11:15 am
$
0
0
now i have a table that has to fetch thousand+ (currently 1829) of rows into the page. what it does is it loads all the data and then implement pagination which consumes 20 seconds or so is there anything i can do.
↧

Datatable table width increases in google chrome but remains correct in IE

July 10, 2013, 12:18 pm
$
0
0
I am using datatable in one of our application and applied properties as "bAutoWidth": false and hardcoded the width of table columns using swidth property. This keeps my table width constant in IE but the same cant be said about Chrome. Even after hardcoding the width of columns and setting "bAutoWidth": false, the table width increases in GOOGLE CHROME. Can anyone help me with this issue? Thanks.
↧

How can I get my custom filter and the standard search text box to show on the same line

July 10, 2013, 6:49 am
$
0
0
I am trying to get a custom filter and the search box to appear on the same line above the table, but they keep appearing on two separate lines, how do I force them together?
    var oTable;
    $(document).ready(function(){ 
    	 oTable = $('#example').dataTable( {   
    	    "bProcessing": true,
    	    "bPaginate": false,      
    	    "sAjaxSource": '/ria/LMPTable.aspx?query=table',
          "aoColumns": [
                    /* Region */ { "bSearchable": false,
                                  "bVisible": false},
                                  { sClass: "alignleft"},
                                  null,
                                  null,
                                  { sClass: "redtext"},
                                  null,
                                  null,
                                  { sClass: "redtext"},
                                  null,
                                  null,
                                  { sClass: "redtext"},
                                  null,
                                  null,
                                  { sClass: "redtext"} 
                                  ],
         "sDom": 'r<"toolbar">fti'
    	} );        
                  $("div.toolbar").html("<input type='radio' name='input_switch' id='radio_1'>All&nbsp;&nbsp;<input type='radio' name='input_switch' id='radio_2'>Midwest&nbsp;&nbsp;<input type='radio' name='input_switch' id='radio_3'>South");
↧
Viewing all 1816 articles
Browse latest View live
Search