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

Truncate String only in IE Browsers

April 15, 2014, 6:19 am
$
0
0
Hi all,

First, thanks for your amazing library, it helps me a lot on my daily work! :)

I have a issue with datatables, I'm getting the data from the server via sAjaxSource, all works fine in firefox and chrome but for large names on Internet explorer is truncating the value,

http://postimg.org/image/xnsfu7sgv/

I set up my datatable as follows:

$('#' + resultTableId).dataTable({
			"bDeferRender": true,
			"bFilter": true,
			"bSort": true,
			"bInfo": true,
			"bProcessing" : true,
			"bSortClasses": false,
			"bJQueryUI" : true,
			"bLengthChange" : false,
			"bAutoWidth" : false,
			"sPaginationType" : "full_numbers",
			"bStateSave" : false,
			"iDisplayLength" : 20,
			"sAjaxSource" : "someurl",
			"sAjaxDataProp" : sAjaxDataProp,
			"aoColumns" : [ 
			               {"mData" : "code", "bSortable": false, "bSearchable": false},
			               {"mData" : "description" ,"bSortable": false, "bSearchable": false},
			               {"mData" : "reimbursementPrice","bSortable": false, "bSearchable": false},
			               {"mData" : "codingInstruction","bSortable": false, "bSearchable": false},
			               {"mData" : "name","bSortable": false, "bSearchable": false},
			               {"mData" : "pkSize","bSortable": false, "bSearchable": false},
			               {"mData" : "strengthMeasure","bSortable": false, "bSearchable": false}
			        ],
			 "fnInitComplete" : function(oSettings, json) {
				var total = json.products.length;
				if(total != 0) {
					enableButtonDownload();			
				}
			 }
		});

What I'm doing wrong?

Thanks!
↧
Search

How to avoid multiple radio buttons selection when paginating a table

April 15, 2014, 3:53 pm
$
0
0
Hello guys,

I'm having a problem here:
When I select a radion button in a page 1 and another one in the same page it works fine, but when I select a radio button in the page number 2, and go back to the page number 1, that first radio button still selected and the one in the page number 2 is also selected, how can I solve this problem? I was looking for a solution here in the forum but couldn't find someone with the same problem.

Here is my simple code:
(sorry, I couldn't host my example in live.datatables.net, not even on JS Fiddle)

$(document).ready(function () {
        var oTable = $('#example').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    });
↧
↧

Bootstrap and server side processing

April 16, 2014, 7:59 am
$
0
0
I have ran into a problem that I assume sDom could possibly fix but I am new to DataTables and would love some help. I have a code igniter app with DataTables and bootstrap integrated. The table headers are not DataTable default. All my tables look great until I needed to pull data back via server side. This table's headers seems to be the DataTable default even though my class is the same as the other tables. I have hard coded the headers but am allowing DataTables to draw the body. Everything looks great except the header row of the table. They spacing should be different and should have a white background and there should be no arrows. All these work great in my other DataTables but not when I am using server side processing. Can anyone help me with this? Unfortunately this is an internal app so I can't send anyone to look at the page. Some sample code would be great or a help with this fix.

Below is my code.


<table class="app-data-table table table-hover table-bordered table-condensed table-striped" id="transactions" >
			<thead>
				<tr>
					<th><small>Action</th>
					<th class="span4"><small>Facility Name</small></th>
					<th><small>Customer Code</small></th>
					<th><small>Check In Date</small></th>
					<th><small>Check In Time</small></th>
					<th><small>Check Out Date</small></th>
					<th><small>Check Out Time</small></th>
				</tr>
			</thead>
			<tbody>
				<?php echo $this->table->generate(); ?>
			</tbody>
			</table>

$(document).ready( function () {
	var oTable = $('#transactions').dataTable();
	oTable.fnDestroy();
	var oTable = $('#transactions').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": '<?php echo base_url(); ?>index.php/transactions/datatable/',
    "bJQueryUI": true,
    "sDom": "<'row'<'span5'l><'span6'f>r>t<'row'<'span5'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "bSortClasses": false,
    "bProcessing": true,
    "sSearch": "Search all columns:",
	  "oLanguage": {
	      "sProcessing": "<img src='<?php echo base_url(); ?>_theme/images/processing-4.gif' width='150px'>"
	  },  
     'fnServerData': function(sSource, aoData, fnCallback)
      {
      	$.ajax
        ({
          'dataType': 'json',
          'type'    : 'POST',
          'url'     : sSource,
          'data'		: aoData,
       
          'success' : fnCallback
        });
      },
 	});
});//end document.ready
↧

Question about fnAddData

April 16, 2014, 9:07 am
$
0
0
Hello, im trying to add rows dinamycally, but when i do, i can not select the new row, i select the rows to pass values to a form, modify and erase. I read i can add classes to the new row with something like this "var n = oTable.fnSettings().aoData[ a[0] ].nTr;" then working with "n" but trying different classes I cant make it to work.

Help appreciated.

Thank you.
↧

How to call preDraw event manually?

April 16, 2014, 9:00 pm
$
0
0
I'm using dataTables with DOM datasource. On preDraw callback I'm truncating data in cells based on column header data attribute. Also I'm using handlebars templates which build this DOM datasource. I have some processing outside the datatable which modifies the datasource (it happens within handlebars logic and in fact changes table html property). I would highly appreciate if you can advise how can I refresh/update the whole table so preDraw event is called and truncation logic works.

The test case is here http://jsfiddle.net/fmmVb/4/

On page load data is truncated, after click on Click Me it is not (I'm not showing the handlebars usage as it really does the same - reassigns html of table).

Please note that I tried to 
var tableData = oTable.fnGetData();
oTable.fnClearTable();
oTable.AddData();
oTable.fnDraw();

but it is super slow and does not seem to work though.

Thanks,
Marina
↧
↧

bStateSave and multiple tables on a page

April 16, 2014, 4:08 pm
$
0
0
I'm using datatables 1.9.4 and have run into an interesting issue with bStateSave. We have a jsp which constructs a table; using bootstrap, we have a table on the page, and the data displayed alters based on the tab/link you click on. In playing with bStateSave in this situation, originally I had a single cookie, as expected, as the cookie name is only based on the page you are on, and the name of the table. I wanted to remember the state of the table based on which "tab" you are on, so I changed the naming of the table to reflect the tab. So instead of a single static name "itemTable", you'd see "itemTable_UNMAPPED_ITEMS", "itemTable_PRODUCTS", etc.

This seemed to work ... at first ... I'd enter a filter on the UNMAPPED_ITEMS tab, and then switch to other tabs, and back to UNMAPPED_ITEMS and the filtering was, indeed, remembered. If I switched to PRODUCTS and then entered a filter, though, my original UNMAPPED_ITEMS tab would lose it's remembered filtering.

In digging, I'm not seeing anything else like this. I did find this post:

http://www.datatables.net/forums/discussion/3997/problem-with-multiple-state-cookies-for-a-path/p1

which isn't quite the same situation, but similar. This pointed me to the use of "fnCookieCallback", so ... I grabbed the sample in the docs which should, I think, be an no-op:

  "fnCookieCallback" : function( sName, oData, sExpires, sPath ) {
    // Customise oData or sName or whatever else here
    return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
}

I really didn't expect anything to change, since this should set the cookie name and data just like the default, but ... it did. Suddenly, the behavior of the state saving worked perfectly.

I also tried setting the cookie prefix via "sCookiePrefix", without the fnCookieCallback, but the cookie naming didn't change.

For now, I'm good with a custom fnCookieCallback, but it's odd that this functions correctly while the default does not. Is there some issue with the default cookie setting where a situation like mine (mild difference in cookie name?) results in the old cookie being cleared?

Thanks,

john
↧

Turkish character issue in search box

January 26, 2014, 11:52 pm
$
0
0
I'm using bootstrap datatable tool. In initialization i set the option bCaseInsensitive as a true but it is not working for Turkish characters. For example we have İ and i, it doesnt understand the value of İ as a i, it is only work for I which accept it as a i. So if i have a some words in my table like İthalic it doesnt find when i put ithalic.

Is there any way to implement search box acceptance language or anything?

Thank you for your help.
↧

Calculate the value of a field "b" in GetFormatter function of a field "a"

April 16, 2014, 4:39 am
$
0
0
Hi Allan. I use datatables 1.9.4
In the get.php I use a getFormatter function to calculate the value of a field

Field::inst( 'etl_product_desc' )->getFormatter( function($val, $data, $field) {
..... here I make a select and return the value of 'etl_product_desc' ...
}

Well, I need to calculate inside this function the value of another field that I retrive in this get.php with another "Field::inst"

Is possible ? How can I do ?

Thanks
↧
Search

Server-side sorting and embedded content

April 17, 2014, 2:39 pm
$
0
0
I'm in the process of converting a couple of my tables to server-side processing (pagination / sorting).
I've prepared the backend to accept the various DataTables params required and its working fine. I did want to see a couple of doubts verified.

The backend call requires authorization so I implemented it like this :

"bProcessing": true,
"bServerSide": true,  
"sAjaxSource":"/interactions/" + options.id,
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
	  oSettings.jqXHR = $.ajax( {
		"dataType": 'json',
		"type": "GET",
		"beforeSend" : function(xhr) {
			xhr.setRequestHeader('Authorization',authUtils.make_base_auth(username, password));
		},                                        
		"url": sSource,
		"data": aoData,
		"success": fnCallback
	  } );
}

My HTML code before the move to server-side processing looked like this

<table id="vehicle-interactions-table">
          <thead>
            <tr>
              <th>Tijd</th>
              <th>Type</th>
            </tr>
          </thead>
          <tbody>
<% _.each(interactions, function(interaction) { %>
  <tr>  
	<td><%= dateUtil.convertDate(interaction.contactedDate) %></td>
	<td><img src="./images/interactions/<%= interaction.type %>.png" class="img-tooltip" data-toggle="tooltip" data-placement="right"  title="<%= interaction.type %> - <%= interaction.comment %>"  /><div style="display:none"><%= interaction.type %></div></td>
	<td><%= interaction.softwareVersion %></td>
	<td><%= interaction.contactedMileageRounded %> km</td>
	<td><%= (interaction.vehicleMetrics && interaction.vehicleMetrics.mileageInKmOneDecimalRounded > 0) ? interaction.vehicleMetrics.mileageInKmOneDecimalRoundedAsString + ' km' : '' %></td>
  </tr>
<% }); %> 
            </tbody>
          </table>

As you can see I'm not using the AJAX integration but rather a DOM approach.
The backend call that returns the data for this table (the interactions) is decoupled for DataTables. DataTables doesn't drive this. So here DataTables simply acts as an overlay to the html table to facilitate paging / sorting / searching ...


When I moved to server-side processing I re-used the same data-structure so I assumed I wouldn't need any changes in the HTML above.

However I noticed that in the case of server-side processing, the AJAX datasource is more tightly coupled and DataTables expects either a JavaScript array (default), or a Javascript object structure to be returned that would be automatically injected into the table.

So if I understand correctly I won't be able to re-use the html snippet above but would have to empty the tbody element and rely on the mData and mRender properties to format and inject the data in the table like this:

"aoColumns": [
	  { "mData": "contactedDate","mRender": function(data, type, full) { return dateUtils.convertDate(data)} },
	  { "mData": "type","mRender":function(data, type, full) { return "<img src='./images/interactions/" + data + ".png' class='img-tooltip' data-toggle='tooltip' data-placement='right'  title='" + data  + "'/><div style='display:none'>" + data + "</div>" } },
	  { "mData": "softwareVersion" },
	  { "mData": "contactedMileageRounded" },

I like the fact that DataTables handles the AJAX calls and the mData property allows me to reference the data in an easy way, but I don't like the html markup being returned in the mRender funcion. I would like to keep that rendering in the HTML.

I such a thing possible ?
↧
↧

Select All filtered

October 24, 2013, 5:26 pm
$
0
0
Is there a simple way to have it when I click the select all button, to only select the results that are filtered? Or do I need to implement my own select all button?
↧

Column reordering state saving with server side data

April 17, 2014, 10:20 pm
$
0
0
Hi Folks,

I am using DataTables 1.9 version in my project and it is populating the data from the server side. I am using ColumnReordering, Column Resizable, Colviz plugins along with this. When the first time it loads the screen it shows perfectly, however when I sort the first column i.e. Name and reorder it to the next column. So 2nd Column shifts to the first and first column shifts to the second. Now When I refresh the page it does not maintain the column-reordering and the sorting is now by default on the 2nd column.

Any solutions ?
↧

Broke when I added sname to get colreorder working... Looks like it matches to me...

April 17, 2014, 10:09 pm
$
0
0
Error: DataTables warning (table id = 'customers'): Requested unknown parameter '0' from the data source for row 0

Creating the datatable:
var oTable = $('#customers').dataTable({
                "sDom": 'CRT<"clear">lfrtip',
                "oTableTools": {
                    "sSwfPath": "/resources/global/lib/dataTables/swf/copy_csv_xls_pdf.swf"
                },
                "bProcessing": true,
                "bServerSide": true,
                "bStateSave": true,
                "aaSorting": [[1, "asc"]],
                "sAjaxSource": "/private/customer_leads/datatable_index",
                "sScrollX": "100%",
                "bScrollCollapse": true,
                "aoColumns": [
                    {"sName": "primary_agent"},
                    {"sName": "customers_full_name"},
                    {"sName": "customers_birthday"},
                    {"sName": "customers_company"},
                    {"sName": "customers_home_phone"},
                    {"sName": "customers_cell_phone"},
                    {"sName": "customers_assistant_phone"},
                    {"sName": "customers_email_address"},
                    {"sName": "customers_primary_address"},
                    {"sName": "customers_primary_city"},
                    {"sName": "customers_primary_state"},
                    {"sName": "customers_primary_zip"},
                    {"sName": "control_reassign"},
                    {"sName": "control_reassignA"}
                ],
                
                "oLanguage": {"sSearch": "Search customer name:"}
            });

JSON from server:

/ignore.. see comment below
↧

Json Format error

April 17, 2014, 4:45 pm
$
0
0
I'm using the basic datatable with Ajax source and keep getting Json format error "DataTables warning (table id = 'example'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error."

My JSON is JSONLint validated..



Here is the debug link for your reference..
http://debug.datatables.net/iwihit

Appreciate any help!
↧
↧

Null check for mData javascript dot notation

April 17, 2014, 3:18 pm
$
0
0
Imagine I have a cell that needs to display this :

"aoColumns": [
    { "mData": "metrics.speed" }
]

In my JSON array however some elements have a metrics element while others don't.
Currently, I get either an alert or a JS error when this occurs.

Is there a way to do a null check here ? So when there are no metrics, don't display anything.
If there are metrics, display the speed.
↧

Move a row from tbody to tfoot

April 20, 2014, 8:25 am
$
0
0
My ajax resultset contains both detail rows and a total row. How can I move the total row from the tbody section to the tfoot section? Would like to allow sorting that does not include total row and apply different styling.
↧
Search

Different colspans for certain rows

April 20, 2014, 6:24 am
↧

insert 2 tables next to each other

April 20, 2014, 2:24 am
$
0
0
hi, I need to insert 2 tables next to each other, could you help me? I try with DataTables multiple but it inserts the pagination in each page, and I do not it but something in one or more pages! tks bye bye
↧
↧

DataTables Load more button

April 20, 2014, 1:18 am
$
0
0
Is there a way for me to extend DataTables in such a way that I would have a load more button that would load a set number of more records without reloading the previous data? I am using an ajax source. I thought we had it working, but then we noticed that it actually redraws the table and gets all the data again. I only want to retrieve the next ten and append them to the table.
↧

Adding custom config variables to a server side response...

April 20, 2014, 10:42 pm
$
0
0
I'm trying to make ColumnFilter pull a list of distinct database values to fill select boxes. Working backwards and search the forums I believe I know what I have to do. (see Allan's 2nd comment here: http://www.datatables.net/forums/discussion/3931/server-side-filtering-on-specific-columns-with-input-and-select/p1)

I'm getting held up on accessing the data I've added. I created an array called 'filterLists' and want to override the data being sent to the select box drawing function if mData is a member of filterLists.

The only part I can't figure out is how to access filterLists once the ajax feed is digested by dataTables. Do I need to declare it somewhere (I've tried but can't access it or find it with a console.log)? What would the syntax be to reference it?
↧

Server side processing returns data but doesnt display on table

April 22, 2014, 5:13 pm
$
0
0
I'm having a bit problems with codeigniter and server side processing...

I'm using this:
https://github.com/IgnitedDatatables/Ignited-Datatables/

My code:

<section class="theader-red"><p>Messages</p></section>
<table cellpadding="0" cellspacing="0" border="0" class="table-white" id="messages">
    <thead class="theader">
        <tr>
            <th width="30%"><p class="fix">From</p></th>
            <th>Subject</th>
            <th width="200">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3" class="dataTables_empty">Loading messages...</td>
        </tr>
    </tbody>
    <tfooter>
</table>

<script type="text/javascript">
fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        var csrf = {"name": "'.$this->security->get_csrf_token_name().'", "value":"'.$this->security->get_csrf_hash().'"};
        aoData.push(csrf);
        $.ajax( {
            "dataType": "json",
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {
                        inner.push( json.aaData[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        } );
    }
}

$(document).ready(function() {
    $("#messages").dataTable({
        "sPaginationType": "full_numbers",
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": true,
        "aoColumns": [
            {"mData": "message_from", sDefaultContent: "n/a"},
            {"mData": "message_subject", sDefaultContent: "n/a"},
            {"mData": "message_date", sDefaultContent: "n/a"},
        ],
        "oLanguage": {
            "sEmptyTable": "No messages"
        },

        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "'.base_url().'ajax_actions/table_process",
        "fnServerData": fnServerObjectToArray( ["message_from", "message_subject", "message_date" ])
    });
});
</script>

Json output:

{
"sEcho": 1,
"iTotalRecords": 2,
"iTotalDisplayRecords": 2,
"aaData": [{
"message_from": "test@example.com",
"message_subject": "Test",
"message_date": "2014-03-11 21:19:55"
}, {
"message_from": "test@example.com",
"message_subject": "Test",
"message_date": "2014-04-04 20:31:39"
}],
"sColumns": "message_from,message_subject,message_date"
}

Everything looks like it should be working.
But when I load page, it shows table like this:

http://i.stack.imgur.com/brD7n.png

Any ideas what could be causing this and how to fix?
↧
Viewing all 1816 articles
Browse latest View live
Search