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

Column Sorting with CheckBox.

January 24, 2014, 10:58 am
$
0
0
Hi
My table has 12 columns. The first 2 are alpha / numberic values and sorting works fine on those.
The last to are select dropdowns, I've got the sorting working fine on those 2.

I've not managed to get any sorting on the columns with checkboxes. The console shows no errors or warnings.

This is the code I've got :

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
	return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
		return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
	} );
}


and 
"aoColumns": [ null, null,
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-checkbox" },
			{ "sSortDataType": "dom-select" },
			{ "sSortDataType": "dom-select" }
			  ]

each row is a <tr> then each checkbox is made using code similar to this :

<td align="center"><form class="my-form">
<input type='hidden' name='id' value='id=BRY'/><input type='hidden' name='cab' value='local'/>
<input type="checkbox" title="local entity"  />
</form></td>

Any way I can get it sort on these columns. My selects are made is a very similar way and work fine.
I've tried removing the <form></form> that didn't help.

Thanks
↧
Search

Trouble reformatting or rendering column data with mdata, mrender

January 26, 2014, 10:09 am
$
0
0
Greetings:

I'm having trouble understanding how to use the aoColumns, aTargets, mdata and mrender functions to reformat some column results as links.

I have a table set up with server side processing, and the last two columns (the 6th and 7th column) are configured to return the id (primary key) of the row from the database.

Here is my code the first try:


<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $('#example').dataTable( {
   "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "scripts/server_processing.php",

    
   "aoColumnDefs": [ {
   "aTargets": [ 5, 6 ],
      "mData": 5, 
         "mRender": function ( data, type, full ) {
           return '<a href="edit1.php?row_id='+data+'">Edit1</a>';
      },
       "mData": 6, 
          "mRender": function ( data, type, full ) {
          return '<a href="edit2.php?row_id='+data+'">Edit2</a>';
      }

  }],

   "oScroller": {
   "loadingIndicator": true
                          }
    } );
} );

    </script>

This results in both the columns I've targeted being set to the same link (the last link) 
 '<a href="edit2.php?row_id='+data+'">Edit2</a>'
.

I changed the code to this:


"aoColumnDefs": [ {
  "aTargets": [ 5 ],
    "mData": 5, 
      "mRender": function ( data, type, full ) {
       return '<a href="edit1.php?row_id='+data+'">Edit</a>';
     },
   }],
"aoColumnDefs": [ {     
  "aTargets": [ 6 ],
    "mData": 6, 
     "mRender": function ( data, type, full ) {
      return '<a href="edit2.php?row_id='+data+'">Edit</a>';
   }
 }],

and it completely skips the 6th column but correctly renders the last and 7th column.

I'm not real familiar with javascript, but I've been working with PHP and mysql for about 6 month. What am I doing wrong with this script?

I would be grateful for any assistance.


Best,
David
↧
↧

Modifying TD contents on data change

January 26, 2014, 11:13 am
$
0
0
Is there a way to provide a function to modify a cell's HTML directly when the data changes ?

That is, rather than recompute and reset the TD's innerHTML (which is what happens if I do mRender) I'd like to be able to provide some function e.g. mRenderUpdateCell which is passed the TD and performs jquery-style manipulation on the DOM. (Thinking is that if this is supplied, then any mRender(type=display) call is suppressed and routed to mRenderUpdateCell instead.)

The reason for this is that I have popup menus in the TD with changing data, and when the data updates if innerHTML changes the popup goes AWOL. (It will also be more efficient than recreating the entire cell HTML when typically there is just a small change to a fragment of the TD.)

I know that fnCreatedCell has been suggested for DOM modifications, but it only works for styling the TD. Any changes it makes to the *contents* of the TD are wiped on the next mRender call (ie when the data is next updated).

If there's a better approach I should follow, I'd welcome suggestions for that also!

Thanks
Alex
↧

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.
↧

Select all checkbox is not working in pagination.

January 27, 2014, 2:05 am
$
0
0
I am using checkbox for deleting rows separately and also using one checkbox(Select all) for checking all the checkboxes and deleting all rows.All the individual checkboxes are working correctly.But if i check the select all checkbox it only check the first page checkboxes and other page checkboxes are not checked.So help me how to check all the checkboxes for all the pages in pagination.
↧
↧

surl Problem

January 27, 2014, 5:30 am
$
0
0
Hello,

when I use the surl option the toolbar with the search and the number of results desapear: ejuzuv (this is the code give by your bookmarklet).

When I took that optiom they appear: enepog (this is the code give by your bookmarklet) .

The question i that i need both... What I´m I doing wrong?

Best,
Sílvia Gaspar
↧

Data Table sorting is changing the layout of the table.

January 19, 2014, 10:13 pm
$
0
0
I am creating a Data table with fixed columns. I am facing problems while sorting. After sorting a column, the layout of table changes. {lease help ASAP.

debug code: epopuv.
↧

Setting aoData dynamically...

January 28, 2014, 9:13 pm
$
0
0
Hi,

I'm looking to establish a small search engine where the result displays on a dataTable. I added a button to the toolbar to call that function to create a custom ajax, once I have it, I intent to apply it to the datatable... it seems to accept it, however it's not displaying it...

I also though about dynamically change the sAjaxSource, but could not find the property...

Any direction is welcome :)

   "aButtons": [ 	
           {"sExtends":    "text",
            "sButtonText":"Refresh", "sButtonClass": "my_button_space_class",
            "fnClick": function ( nButton, oConfig, oFlash ) {
                DoSearch();
              }
            },     
   ...
 

   function DoSearch(){
      // create url filters from user selected options
      var MyCustomURL = "Data.php?tbl=7";
      $.ajax({url: MyCustomURL, success:function(result){
          HomeSearchT.dataTable().data( result.aaData);
          //HomeSearchT.fnSettings().aoData = result.aaData;
          //alert(result);
      }});   
   
   }
↧
Search

Jquery Datatable in Modal Dialogue is opening just once

January 28, 2014, 10:48 pm
$
0
0
i am using asp.net mvc with bootstrap 3 and i am opening a modal dialogue in which i m loading jquery data-tatble .At first time everything is working fine but when i am closing the modal and again opening the modal its throwing the error :
Uncaught TypeError: Cannot read property 'aoData' of null
Code i am using :
 
var responsiveHelper;
var breakpointDefinition = {
    tablet: 1024,
    phone: 480
};
var tableContainer = $('#datatable');
$(document).ready(function (){
   tableContainer.dataTable({
        // Setup for Bootstrap support.
        sDom: '<"row"<"span6"l><"span6"f>r>t<"row"<"span6"i><"span6"p>>',
        sPaginationType: 'bootstrap',
        oLanguage: {
            sLengthMenu: '_MENU_ records per page'
        },
        bFilter: false,
        // Setup for responsive datatables helper.
        bAutoWidth: false,
        fnPreDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
            }
        },
        fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            responsiveHelper.createExpandIcon(nRow);
        },
        fnDrawCallback: function (oSettings) {
            responsiveHelper.respond();
        }
    });
});



Thanks :) . Please Help
↧
↧

managing sorting of columns on runtime

January 29, 2014, 1:22 am
$
0
0
Hi All,

I am creating a table on run time, so cannot define n. of columns. But i have to define custom sorting on the columns. Can any one help?
Its urgent.
↧

manually change the JSON object before enhancing datatables in order to add extra columns

January 29, 2014, 2:08 am
$
0
0
Hi, I have this JSON object that has all the info needed to enhance datatables.
The JSON Object looks like this:
{
	"isDirty": false,
	"group": false,
	"bAutoWidth": false,
	"bDestroy": false,
	"bFilter": true,
	"bInfo": true,
	"bPaginate": true,
	"bSortable": true,
	"bSortCellsTop": false,
	"sDom": "Rlfrtip\u003c”#back1”\u003e",
	"wrapperWidth": 480,
	"aaData": [
		["10-08-11", "12", "12-2", 576, 17060, 201195.34, 127, 0],
		["18-08-11", "12", "12-2", 576, 16380, 197155.76, 128, 0],
		["19-09-11", null, "50-1", 697, 19857.53, 212585, 149, 0],
		["30-09-11", "10", "10-1", 414, 12560, 152361.18, 131, 0],
		["26-10-11", "11", "11-3", 640, 21340, 255769.94, 135, 0],
		[null, null, null, null, null, null, "a", 0]
	],
	"aoColumnDefs": [{
		"group": 0,
		"aTargets": [0],
		"sTitle": "Dato",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sClass": "ui-datepicker-inline",
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [1],
		"sTitle": "Lokation",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [2],
		"sTitle": "Batch",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [3],
		"sTitle": "Antal grise",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sClass": "alignRight",
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [4],
		"sTitle": "Total kg",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sClass": "alignRight",
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [5],
		"sTitle": "Total",
		"bVisible": true,
		"bSearchable": true,
		"bSortable": false,
		"sClass": "alignRight",
		"sWidth": "80px"
	}, {
		"group": 0,
		"aTargets": [6],
		"sTitle": "Id",
		"bVisible": false,
		"bSearchable": false,
		"bSortable": true
	}, {
		"group": 0,
		"aTargets": [7],
		"sTitle": "Dirty",
		"bVisible": false,
		"bSearchable": false,
		"bSortable": false
	}]
}
I call datatables like this: 
window.actTableDefData = JSON.parse(localStorage.getItem("datatables"));
window.oTable = $('#example').dataTable(window.actTableDefData);

I want to know if it is possible to change this object (window.actTableDefData) in order to add two columns: edit and delete so that each row can be edited/deleted. If yes, how can I achieve that?
↧

Fixed column widths

January 29, 2014, 12:12 pm
$
0
0
I am trying to make a grid with columns of an exact width where the width of the columns never changes (unless a user resizes the column). I've had some success creating the grid, but after the grid is initialized, if I hide columns within the grid, the remaining columns expand past their sWidth settings to take up the new space available in the grid. I'd like them to stay at exactly the sWidth that I specify in the aoColumns. Is there a setting to tell dataTables to never auto adjust the width of the columns? Alternately, a setting that tells it to set the width of the table to the exact width of the sum of all sWidths of the visible columns?

Thanks. If it helps I can try to create an jsfiddle or just an example to illustrate. But there is a lot of stuff going on in my actual code so it is difficult to boil down to the useful bits for this question.

A little more information :

I have

"bAutoWidth": false,
"sScrollX": "100%",

If I remove sScrollX things seem to work as expected, meaning that when I hide the columns the remaining columns maintain their original width. However, the header row does not scroll left-right with the data. In other words, when I drag the horizontal scrollbar to the right, the data moves with it, but the header stays where it is. So after scrolling, the header and data columns are no longer in sync.

If I put sScrollX back to 100%, the header row scrolls correctly, but when I hide columns, the other columns expand.

Edit 2 :

It seems to work exactly as I'd like if I do

"sScrollX": "100%",
"sScrollXInner": "100%",

Though I can't say exactly why it works or changes auto resize behavior :) If I remove the sScrollXInner the columns auto adjust.

Is there a better way to do this or did I stumble onto the answer?
↧

Help ScrollX

January 29, 2014, 1:16 pm
$
0
0
Sorry for my english. I have a problem when using DataTable with sScollX, I searched the forum and not found. When I use the sScrollX a header more more appear.

$(document).ready(function() {
   var oTable = $('#usuarios').dataTable({
            
           
          "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>S",
          "sScrollX": "300%",
          "sPaginationType": "full_numbers",
            "oLanguage": {
                "sZeroRecords": "Nenhum registro foi encontrado",
                "sLengthMenu": "Exibir _MENU_ registros",
                "sInfo": "_START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Nenhum registro a ser exibido",
                "sInfoFiltered": "(filtrado do total de _MAX_ registros)",
                "sProcessing": "Processando...",
                "oPaginate":{
                    "sFirst":"Primeiro",
                    "sLast":"Último",
                    "sNext":"Próximo",
                    "sPrevious":"Anterior"    
                },
                "sSearch": "Buscar:"                    
            },
            "bProcessing": true,
            "bServerSide": true,
            "aoColumns": [
              { "sTitle":'',"sClass": "center", "bSortable": false },
              { "sTitle":"id","bSortable": true },
              { "sTitle":"nome","bSortable": true },
              { "sTitle":"email","bSortable": false },
              { "sTitle":"perfil","bSortable": true },
              { "bSortable": false },
              
              
            ],
            "sAjaxSource": "{{=URL('_usuarios')}}",
             
    
    });

Example: https://malucao866.pythonanywhere.com/test/usuario/listar
debug
↧
↧

Uncaught TypeError: Cannot read property 'aoData' of null

November 5, 2013, 6:41 am
$
0
0
I have been trying various things today but made barely any progress. I keep getting this error (Uncaught TypeError: Cannot read property 'aoData' of null), but DataTables does work. I have 4 DataTables on the dashboard of a website. These DataTables work, but I do get this error. On another page I want to use DataTables it does not work.

I copy/pasted a table from the dashboard, but it does nothing apart from showing the same error.

http://live.datatables.net/ireciz/edit#javascript,html
↧

Trouble with css on dynamic table loading

January 30, 2014, 7:55 am
$
0
0
I have trouble getting table displayed correctly when loading html table dynamically like this:

<head>
        <meta charset="utf-8">
        <title>mytable</title>
        <script type="text/javascript" src="jquery-ui-1.10.4/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.4/ui/jquery.ui.position.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.4/ui/jquery.ui.menu.js"></script>
        <script type="text/javascript" charset="utf-8" src="DataTables-1.9.4/media/js/jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
        <link href="jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
        <link href="jquery.dataTables.css" rel="stylesheet" type="text/css" />

     <script>
        $( document ).ready(function() {
            $.get("http://&quot; + location.hostname + ":5556/mytable.html", function(data) {
                $("body").append(data);
                var table = $("#mytable").DataTable();
            });

        });
    </script>

</head>

*Some* CSS is being applied because I see lightblue-white alternating background in rows. Everything else, however, is not used (although Javascript works, e.g. Prev or Next buttons, search, sorting by columns, etc).

What's the problem here? After all I wait until document is read, that is, CSS should be loaded, no?
↧
Search

Link in each row (opening a modal)

January 30, 2014, 1:22 am
$
0
0
Hi,
I put a link in each datatable rows, by clicking on it, it should open a bootstrap modal for confirm.
Here's the code for the link:
<a href="#" id="trial_link" data-link="update.php?action=2&id=1">Link</a>
Here's the code for the modal:
<div id="delConfirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-header">
  		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  		<h3 id="myModalLabel">Text</h3>
  	</div>
  	<div class="modal-body">
  		<p>Some text</p>
  	</div>
  	<div class="modal-footer">
  		<button class="btn" data-dismiss="modal" aria-hidden="true">No</button>
  		<a href="#" id="btnYes" class="btn btn-primary" data-dismiss="modal">Yes</a>
  	</div>
  </div>
Here's the code for the jquery:
$(document).ready(function(){
		//Modals
  	$("#trial_link").on('click',(function(){
    	//alert("this is a trial");
  		$("#btnYes").attr("href", $(this).attr("data-link"));
      $("#delConfirm").modal('toggle');
      return false;
  	}));
	});
After this, nothing happen if the link is clicked. I thought I've done wrong with modal code, so I put a simple alert (uncommented of course), but nothing happen again.
Any help?
↧

fnStateLoadParams some times not executed

January 31, 2014, 3:00 am
$
0
0
Some times fnStateLoadParams are not executed when loading table state.

form.resultTable = $( form.searchResult ).dataTable({
"fnStateLoadParams": function (oSettings, oData) {
var json = ${resultsBean.tableState};

if (json) {
oData.iDisplayStart = json.iDisplayStart;
oData.aaSorting = json.aaSorting;
}
       
},
"bAutoWidth": false,
"bFilter": false,
"bServerSide": true,
"sAjaxSource": "fetchtabledata.do?"+"instance=<c:out value="${resultsBean.instance}"/>",
"bStateSave": true,
"bDeferRender": true,
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var cells = $( nRow ).children( 'td' ),
ch = $( cells[0] ).text().split(":"),
vr = $( cells[1] );
at = $( cells[2] );
hl = $( cells[3] );
var usualCell = 1;
//add checkbox
$( cells[0] ).text("").html( $( '<input type="checkbox" index="'+ch[1]+'">' ).attr( "checked", ( ch[0] == 1 ) ? true:false ));
//add attachment
if ( at.text() == 1) {
usualCell++;
at.html( '<span class="ui-button-icon-primary ui-icon ui-icon-additional ui-icon-attachment"></span>' );
/*
at.html( "<span class=\"ui-button-icon-primary ui-icon ui-icon-disk\" alt=\"<bean:message key='alt.attach'/>\"</span>" +
"<span class=\"ui-icon ui-button-icon-secondary ui-icon-additional ui-icon-bug\" alt=\"<bean:message key='alt.attach'/>\"</span>"); */
}

if ( vr.text() == 1) {
usualCell++;
vr.html( '<span class="ui-button-icon-secondary ui-icon ui-icon-additional ui-icon-bug"></span>' );
}
//add preserve
if (hl.text() == 1) {
usualCell++;
hl.html( "<span class=\"ui-button-icon-primary ui-icon ui-icon-pin-s\" alt=\"<bean:message key='alt.hold'/>\"</span>" )
}

for ( var int = usualCell++, length = cells.length; int < length; int++) {
var cell = $( cells[int] ),
text = cell.text();
if( text.length > 0 ) {
cell.attr( 'title', text ).wrapInner( '<div class="xS"/><div class="xT"/><div class="y6"/>' );
}

}
},
"bJQueryUI": true,
"bSort": true,
"sDom": 'r<"H"i>t<"F">S',
"sScrollY": searchResultsHeight,
"aoColumnDefs": [
{ "bVisible": false, "sWidth": "0%", "aTargets": [ 0 ] },
{ "bSortable": false, "aTargets": [ 1, 2, 3, 4 ] },
<logic:iterate id='field' name="resultsBean" property="searchResultFields" indexId="fieldsIndex">
<c:if test="${field.columnSize!=-1}">
{ "sWidth": "${field.columnSize}%", "aTargets": [ ${fieldsIndex+2} ] },
</c:if>
<c:if test="${field.columnSize==-1}">
{ "aTargets": [ ${fieldsIndex+2} ] },
</c:if>
</logic:iterate>
{ "sWidth": "3%", "aTargets": [ 1 ] }
],
"fnInitComplete": function(oSettings, oData) {
$(form.form+' .dataTables_scrollBody').css('height', searchResultsHeight);
scrollDT = function() {
oSettings.oScroller.fnScrollToRow( oSettings._iDisplayStart );
}
scrollDT();
},
"oLanguage": {
"sEmptyTable": '<bean:message key="searchresults.no_info"/>',
"sInfo": "[_START_ - _END_] _TOTAL_",
"sProcessing": '<bean:message key="alt.working"/>...'
},
"bProcessing": true

});
↧
↧

Can't figure out why sScrollY corrupts the Columns's size and alignement

January 31, 2014, 2:57 am
$
0
0
I need to use sScrollX and ScrollY property for my datatables. But simply adding one of this property cause a lot of problems with size and alignemnt of the columns.

Here is a simple re-production of my table. In reality i use an Ajax call to fill my table. but i replied some data for this example:

http://live.datatables.net/Ikis/1/edit

Here is a pic of my real page:

https://www.evernote.com/shard/s44/sh/5a7c2a79-d265-4461-965b-9a65625cdf6d/855d7875b0c9e960cc533e82c5717622

Can someone explain me this behavior ?
↧

I need reordering rows and columns using Drag'n'Drop in Data Table

January 31, 2014, 6:41 pm
$
0
0
HI All,

is have any possible way tp reordering rows and columns using Drag'n'Drop in Data Table.

Thank You,
Chathura Mahindarathne
↧

JSON Data from server could not be parsed error when page is first loaded

February 3, 2014, 2:00 am
$
0
0
I have a strange issue with my datatable. Basically, when it is first run after opening a browser, i get this error :

datatables warning : JSON data from server could not be parsed.

If i click OK and then refresh the page, everything works fine and continues to work fine.

I am guessing this is some kind of timing issue in that the data has loaded well before the page ?
↧
Viewing all 1816 articles
Browse latest View live
Search