Search for text in bootstrap table not work with X-editable

Question

I have an issue with search for text with bootstrap table while on of the columns is a select type of X-editable.

this fiddle explain the scenario:

http://jsfiddle.net/eitanmg/fdg3kaws/

when search for "online" it will show you 0 results. when search for "1" it will show you the online result.

because when search for "1" is the value key of the select data that stands behind the "online" value.

but how can i make the table to search for the texts and not their values?

Answer 1

How about adding the text as a value? See the updated fiddle here.

$(document).ready(function () {

var data = [
    {
        "number": "one",
        "status": "online",
    },
        {
        "number": "two",
        "status": "offline",
    }
];

$('#mainTable').bootstrapTable({
    data: data,
    search: true,
    searchAlign: 'left',
    showRefresh: false,
    showToggle: true,
    showColumns: true,
    columns: [{
      field: "number",
      title: "Number"
    },
    {
      field: "status",
      title: "Status",
      sortable: true,
      editable: {
        disabled: true,
        type: 'select',
        title: 'Select Status',
        emptytext: 'Select...',
        source: [{value: "online", text: "online"}, {value: "offline", text: "offline"}],
      }}
      ]
   });
});