How to remove cross icon in search box

How to remove cross icon in search box

noruganoruga Posts: 6Questions: 0Answers: 0
edited March 2014 in General
I have added the search box to my datatable and it works fine, but in IE10 I get an clear icon.
How do I
1) Remove this
2) Wire it up to trigger filter to update. Now it removes text but it does not update the datatable content based on the clear filter

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    You could use:

    [code]
    $('.dataTables_filter input').attr('type', 'text');
    [/code]

    That will change the input element into a started text input rather than a search box.

    Allan
  • noruganoruga Posts: 6Questions: 0Answers: 0
    thanks. I am using it with backbone and tried to add this
    "fnInitComplete": function(oSettings, json) {
    this.$('.dataTables_filter input').attr('type', 'text');
    },
    but it did not work :( Is there anyway else to hide it?
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    > this.$('.dataTables_filter input')

    Remove the `this.` . `this` in that context is the table node, and the filtering input is outside the table node. Thus your selector won't be finding anything.

    Allan
  • noruganoruga Posts: 6Questions: 0Answers: 0
    Still didnt work. But I am using it with backbone & marionette so maybe thats why.
    This is how the code looks like

    [code]
    CV.CVCompositeView = Backbone.Marionette.CompositeView.extend({
    itemView: CV.CVtemView,
    appendHtml: function (collectionView, itemView) {
    collectionView.$("tbody").append(itemView.el);
    },
    template: "#compositeView-template",
    onRender: function () {
    var that = this;

    oTable = this.$('#dtTable').dataTable({
    "bStateSave": true,
    "bExpandableGrouping": true,
    "bPaginate": false,
    "bDeferRender": true,
    "bSort": false,
    "bProcessing": true,
    "sDom": '<"infoExtra"f><"infoExtra"i>rt<"clear">',
    "bSortable":false,
    "oLanguage": {
    "sSearch": "Filter: ",
    "sInfo": "Showing _TOTAL_ of _MAX_ entries",
    "sInfoFiltered": ""
    },
    "bAutoWidth": false,
    "fnInitComplete": function (oSettings, json) {
    $('.dataTables_filter input').attr('type', 'text');
    },

    [/code]
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Urgh - looks like it is a "feature". A CSS hack can be used to remove it: http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs

    Allan
  • noruganoruga Posts: 6Questions: 0Answers: 0
    Perfect!
    ::-ms-clear {
    display: none;
    }
    removed it. Thanks a lot!
This discussion has been closed.