Add Jquery UI Button to DataTable

danielgoddard

Has anyone ever added a JQuery UI Button into a cell in a datatable?

I am using a JSON source for my datatable with PHP/MySQL. All the data populates just fine. I tried declaring the button and then putting the div in my JSON data with no luck. Any ideas?

TomC

Can you use jQuery to add the button to the cell separate from the Ajax call?

bilbodigi

Hi,
I added a button just before the searchfield like this.
[code]
$('').attr({'id' : 'addNewMember'})
.css({'display' : 'block'})
.prependTo($('#members_filter')); //Change this to the id of your cell
$('').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only')
.attr({'role' : 'button' , 'aria-disabled' : 'false', 'type' : 'button', 'style' : 'float : left; margin-top:1px;'})
.html('L

zoj

Where should I put your code?
[code]
$('').attr({'id' : 'addNewMember'})
.css({'display' : 'block'})
.prependTo($('#members_filter')); //Change this to the id of your cell
$('').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only')
.attr({'role' : 'button' , 'aria-disabled' : 'false', 'type' : 'button', 'style' : 'float : left; margin-top:1px;'})
.html('L

bilbodigi

You don´t need the HTML code.
Put this code after your dataTable.

Use jquery-ui-1.8.1.min

[code]
$('').addClass('UnSelectAllButton').css({'float' : 'left'}).attr({'id' : 'UnSelectAllButton'}).prependTo($('#sampleTable_filter'));
$('').attr({
'id' : 'deSelectAll'
})
.html('deselect All')
.appendTo($('#UnSelectAllButton'));
$("button", ".UnSelectAllButton").button();

$('').addClass('selectAllButton').css({'float' : 'left','padding-right':'5px'}).attr({'id' : 'selectAllButton'}).prependTo($('#sampleTable_filter'));
$('').attr({
'id' : 'selectAll'
})
.html('Select All')
.appendTo($('#selectAllButton'));
$("button", ".selectAllButton").button();
[/code]