I'm trying to remove the words "Search:" from the filter label in DataTables. I have tried to use jQuery to replace the label dom but when replaced the filter will not work. Any one have any other solutions?
Well seems everybody wants code:
<div id="table-staff_wrapper" class="dataTables_wrapper">
<div id="table-staff_length" class="dataTables_length">
<div id="table-staff_filter" class="dataTables_filter">
<label>
Search:
<input type="text">
</label>
</div>
<table id="table-staff" cellspacing="0" cellpadding="0">
<div id="table-staff_info" class="dataTables_info">Showing 1 to 3 of 3 entries</div>
<div id="table-staff_paginate" class="dataTables_paginate paging_full_numbers">
the above is auto generated by DataTables
refer this link http://datatables.net/ref#sinfo
add this thing to your code--
"oLanguage": { "sSearch": "" }
even if you don't get what you wished then you can simply post the same question on dataTable forum...dataload team will assist you...
Hope it will help you..
You must initialize datatables like this:
$('#yourtable').dataTable({
//your normal options
"oLanguage": { "sSearch": "" }
});
For datatables 1.10.10 (& possibly above), you can use following configuration while creating the datatables instance:
$('.datatable').DataTable({
// other initialization configurations...
// ...
"language": {
"search": "_INPUT_",
"searchPlaceholder": "Search..."
}
});
For more details, here is the link from DataTables site: https://datatables.net/reference/option/language.searchPlaceholder
For Datatables 1.9.4 and above you can use this
$('#yourtable').dataTable({
//your normal options
"language": { "search": "" }
});
Put placeholder when you remove search label
$("#data-table").DataTable({
language: { search: "",searchPlaceholder: "Search..." }
});
try below code:
jQuery("level").html("") or
jQuery("level").text("") or
jQuery("level").get(0).text("")
this will get all the level tag element,
since there is only on ehere use index 0.
It will find level element and set the value as ""
For some reason Placeholder wasn't working for me.
So, My workaround for removing Label and Putting place holder is,
$('#RecentLogs').dataTable({
"oLanguage": { "sSearch": "" }
});
So, above code will remove search label.
And for placeholder.
$('.dataTables_filter input').attr("placeholder", "Search Here");
Note :- Be sure that you are including placehoder's jquery line after datatable's initialization and after loading external js of datatable.
Related
In Angularjs I am trying to search in json data which i am using in html template. My input json data is as below,
var data = JSON.parse(
'{
"Project": {
"_attributes": {
"gui": "ProjectGui",
"prjname": "MyProject"
},
"stringarr": [
{
"_attributes": {
"name": "Project.comments"
},
"_text": "MyComments"
},
{
"_attributes": {
"name": "Project.classpath"
},
"_text": "D:\\Project\\bin\\config.jar"
}
]
}
}'
);
And i am using this for displaying and editing name in my html template, which is working fine. When I edit input box , it reflects the changes in json data as well, that's exactly I want.
Name: <input type="text" ng-model="data.Project._attributes.prjname"><br>
But I also want to display and edit comments in same way but not getting idea how to achieve this. The difference is, I have to search within json data where data.Project.stringProp[i]._attributes.name is "Project.comments" and take "_text" as input for displaying & editing. I have tried following that is not working.
Comments: <input type="text" ng-repeat="x in data.Project.stringProp" ng-model="x">{{x._text}}<br>
Please suggest , what would be the best possible way to do this. I think it can be done using a get function and ng-change function but that approach will be lengthy and may put performance overheads.
Thanks
You can either implement a filter for filter _text value if the name is 'Project.comments', or you can simply add an ng-if statement.
Comments: <input type="text" ng-repeat="x in data.Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}<br>
I have resolved this by using ng-repeat and ng-if for specified condition.
<body ng-controller="Controller">
Name: <input type="text" ng-model="data[0].Project._attributes.prjname"><br>
check: <div ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}</div><br><br>
comments : <input type="text" ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'" ng-model="x._text"><br>
</body>
Please find the following plunkr
https://plnkr.co/edit/3jUaw73cHgAtbBZr8LuJ?p=preview
I'm trying to get X-Editable plugin with Select2 Tags option to work where I can populate some tags from an array object which I'm retrieving from server.
HTML
<div class="container">
<table>
<tr>
<td>Name:</td>
<td><div class="editable" data-asset="name"></div></td>
</tr>
<tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
<tr>
<td>Tags:</td>
<td>
<div class="editable" data-asset="tags"></div>
<button id="asset-button-tags-edit">Edit Tags</button>
</td>
</tr>
</table>
</div>
JavaScript:
data = {
///...
// current tags <- user can add and remove tags
assetTags: [{
'778': 'Racer',
'456': 'BMW',
'112': 'M3'
}],
// available tags <- user could only add tags from this list
availableTags: [{
'345': 'Winner',
'789': 'Boy Racer',
'101': 'Boy Racer',
'009': 'Orange',
'778': 'Racer',
'456': 'BMW',
'112': 'M3'
}]
///...
}
$assetTags.editable({
type: 'select2',
pk: 1,
autotext : 'always',
source : getSource(),
value : data.assetTags,
emptytext: 'None',
display: function(value, sourceData) {
var html = data.assetTags,
checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
if(checked.length) {
$.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
$(this).html(html.join(', '));
}
else {
$(this).empty();
}
},
select2: {
multiple : true,
initSelection : data.assetTags
}
});
How it should work:
User could only add tags to data.assetTags which are available at
data.availableTags
User could remove all the tags from data.assetTags
So whatever changes is done, it should be in sync with data.assetTags and that's what I will be sending back to the server.
Here is what I've currently achieved, not sure where I'm going wrong! hopefully somebody could help me with this :)
DEMO: http://jsfiddle.net/Farzad/20e6e1os/10/
Many thanks
Maybe you should follow this structure in multiple tags using x-editable: https://jsfiddle.net/emo_noel10/dLeumnpg/25/ and http://jsfiddle.net/dplanella/N6bQE/36/.
Try to change $assetsTag with the div class i.e: $('.editable').editable({});. And try to change the div tag with span tag.
I'm just new to the x-editable library, just sharing my learnings. Let me know if it is working. And btw, please answer here: (How to save data and to add new tag and its data from select 2 multiple select tag) if you have an idea on how to add new tags in this link https://jsfiddle.net/emo_noel10/dLeumnpg/25/. Thanks.
I am trying to render some fields before exporting to excel in my function I am doing like this;
"tableTools": {
"sSwfPath": "assets/global/plugins/data-tables/tabletools/swf/copy_csv_xls_pdf.swf",
"aButtons": [ {
"sExtends": "xls",
"sButtonText": "Excel",
"fnCellRender":function(sValue,iColumn,nTr,iDataIndex){
console.log(sValue);
//console.log($(sValue));
return sValue;
}
}, {
"sExtends": "print",
"sButtonText": lang.L_PRINT,
"sInfo": lang.L_PRINT_DESC,
"sMessage": "Metrics"
}]
}
So when I uncomment
console.log($(sValue));
it returns just first and second column which doesn't include any html tag inside. But when it finds a value that have html tag it stops.
ex - this gets the valu
<td class=" sorting_1">201408</td>
this doesn't
<span style="text-align:right;display:block;width:100%">121.25</span>
How can I fix it ?
To troubleshoot this I found it much easier to just write the data into the CSV and see the format so I could then choose how to parse.
When you use the fnCellRender property TableTools will not do any parsing of the HTML anymore. I would expect that you would see the raw data in the console window some of which would be HTML I assume and others just values.
When it's HTML you can use JQuery to extract the values or a regular expression. E.g
if ($(sValue).prop("checked")) {
return "TRUE";
} else {
return "FALSE";
}
or in your case
return $(sValue).val();
Some research I used:
TableTools background and good discussion with links
TableTools Reference API
I searched for some time but could not find a working solution for my problem (sorry if I searched wrongly)...
I would like to have the equivalent of the following function for an element loaded with ajax:
$(document).ready(function() {
$('.div-modal-text').css("background-color","red");
});
Therefore I am using the following code:
$('#parent_id').on('action', '#id or class to be born', function to be performed() );
In my example the parent-child structure is: #projectModals (div whose content is dynamically loaded)>...>.div-project-description>.div-modal-text
This translates into the following code in my example:
$('#projectModals').on('load', '.div-project-description', function() {
$(this).find('.div-modal-text').each(function() {
$(this).css("background-color","red");
});
});
I know 'load' does not work with .on(), but I tried different alternatives and I could not find anything working.
Thanks for your help!
EDIT: Here is my (simplified) HTML code:
<div id="projectModals"></div>
content loaded in #projectModals with Ajax:
<div class="row">
<div class="div-project-idcard">
column 1, don't bother too much about this column
</div>
<div class="div-project-description">
<div id="summary" class="div-modal-text">
Column2, text 1
</div>
<div id="purpose" class="div-modal-text"">
Column2, text 2
</div>
<div id="reforestation" class="div-modal-text">
Column2, text 3
</div>
<div id="certification" class="div-modal-text">
Column2, text 4
</div>
</div>
</div>
If you're waiting for it to be loaded via ajax, consider using $(window).ajaxSuccess() instead:
$(window).ajaxSuccess(function(){
$('#projectModals .div-project-description .div-modal-text').each(function() {
$(this).css("background-color","red");
});
});
for what I understand, you want to change some background color after an ajax has been executed.
I think it's best to make the operation in the ajax success
$.ajax({
url: "some url",
data: {some data},
success: onAjaxSuccess,
});
and then;
function onAjaxSuccess(data){
//.. do things with data
var toExecute = $('#projectModals .div-project-description');
toExecute.find('.div-modal-text').each(function() {
$(this).css("background-color","red");
});
}
We're using the DataTables jQuery plugin (http://www.datatables.net) to create sortable tables. This plugin auto-detects the data type of the data in each column.
When you want to specify the data type of a column yourself, you add the "aoColumns" attribute when you initialize the datatable:
$('#accountTable').dataTable({
"bPaginate": false,
"sScrollX": "100%",
"bScrollCollapse": true,
"aoColumns": [
null,
null,
{ "sType": "currency" },
{ "sType": "currency" }
]
});
Note, I downloaded the currency data type plugin for datatables. This works great.
However, I'm concerned that if we ever make changes to the table column, we'll forget to go back into the JS and change how the datatables plugin is initialized on that table.
So... It would be ideal to specify the data types directly in the table as necessary:
<table class="dataTables display">
<thead>
<tr>
<th>Category</th>
<th>Product</th>
<th sType="currency">Cost</th>
<th sType="currency">Retail</th>
...
Is there any way to do this, either with default functionality of DataTables (which I can't find) or using a JS loop or something to loop through the tags of the table and update the sType where "sType" attribute exists?
Here is an absolutely cool way to do it:
Your header HTML:
<table id="sorted-table">
<thead>
<tr>
<th data-s-type="string">Number</th>
<th data-s-type="html">Complex Name</th>
<th>Price</th>
<th data-b-sortable="false">Action</th>
</tr>
</thead>
...
Your JS:
$('#sorted-table').dataTable({
...
"aoColumns": $('#sorted-table').find('thead tr th').map(function(){return $(this).data()})
});
Note: those dashes in data attributes are needed. They get converted to camelCase form by jQuery which makes it compatible with the data tables API.
Picking up on CBroe's comment, this is exactly what I do. Just ensure that your custom attributes are prefixed with data-, such as data-stype='currency' per the HTML specs.
Having your JS loop through and check for attributes on the headers would work, but you can't just invent an sType attribute and have it show up in the DOM. You'd have to subvert a valid but unused attribute like headers (and that might cause trouble for screen readers; there may be a better option).
Edit:
OK, having read CBroe's comment, I guess it is possible to give an element an arbitrary attribute.
So, if you wanted to be HTML5 compliant, you could name the property data-sType and then do something like this:
var aoColumns = [];
$('#accountTable > th').each(function() {
var sType = $(this).getAttribute("data-sType");
aoColumns.push(sType ? sType : null);
});
$('#accountTable').dataTable({
...
"aoColumns": aoColumns
});
Thanks to all for your help! I had to make a couple tweaks to Russell Zahniser's comment for it to work for me:
Changed $('#accountTable > th') to $('#accountTable thead th')
Changed aoColumns.push(sType ? sType : null) to aoColumns.push(sType ? { "sType" : "currency" } : null)
End result:
var aoColumns = [];
$('#accountTable thead th').each(function() {
var sType = $(this).getAttribute("data-sType");
aoColumns.push(sType ? { "sType" : "currency" } : null);
});
$('#accountTable').dataTable({
...
"aoColumns": aoColumns
});