Datatables.net

sort/ filter by value while displaying other value

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<p>Search for "xxx" or 'yyy'</p>

<div class="container">
    <table class="grid"></table>
</div>

CSS

.dataTable {
    width: 100% !important;
    margin: 0;
}

.dataTables_wrapper {
    position: relative;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}



.container {
    position: relative;
    width: 70%;
}

.container .grid {
    position: relative;
    overflow-x: hidden;
}

JavaScript

var dataTable = $(".grid").dataTable({
    bFilter: true,
    bDeferRender: true,
    bProcessing: false,
    sDom: "ft",
    aaData: [
        {translatedString: "translatedString contains triple x's",
         filterBy : "xxx",
         name : "name 1",
         id : "1"
        },
       {
         translatedString: "translatedString contains triple y's",
            filterBy : "yyy",
         name : "name 2",
         id : "2"
        }    
      ],
    aoColumns: [
        { sTitle: "translatedString", mData: "filterBy" , mRender: function(data, type, full){
            if (type == "display" ){
              return full.translatedString;                
            }
            return full.filterBy
        }},
        { sTitle: "ID", mData: "id"},
        { sTitle: "Name",mData: "name"},
        {sTitle: "ID", mData: "id"}
    ]
});