jquery-bootgrid, как отформатировать ответ ajax

Я использую jQuery-Bootgrid для форматирования моих таблиц. Теперь я хочу перейти к следующему шагу и загрузить данные таблицы через Ajax. После этого я хочу отфильтровать данные таблицы, проверив некоторые параметры и отправив выбранные параметры через ajax в URL. И это по выбору варианта.

Проблема, с которой я столкнулся, заключается в том, что каждый раз, когда загружается ответ ajax, все данные отображаются в таблице, строки не могут быть выбраны, и когда я выполняю поиск с помощью функции поиска по таблице, таблица показывает все данные.

Без Ajax все работает нормально, но я не могу изменить данные таблицы при изменении выбранных опций.

HTML

<div class="table-responsive">
  <table id="grid-editTable" class="table table-condensed table-hover table-striped table-bordered"  data-selection="true" data-row-select="true" data-keep-selection="true">
    <thead>
      <tr>
        <th data-column-id="id" data-visible="false" data-visible-in-selection="false"> ID</th>
        <th data-column-id="Pos" data-visible="false" data-identifier="true"                                          > Pos.</th>
        <th data-column-id="commands" data-width="40%" data-formatter="commands" data-sortable="false" > Command</th>
        <th data-column-id="nr" data-width="5%" data-header-css-class="nowrap"> Number </th>
        <th data-column-id="data2" data-width="5%" data-formatter="data2"          data-header-css-class="nowrap"> Data 2 </th>
        <th data-column-id="data3" data-width="50%"> Data 3 </th>
      </tr>
    </thead>
  </table>
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="input-group">                            
      <select class="selectpicker form-control filterTable" multiple id="filterStatus" title="Status..." data-selected-text-format="count > 3" data-live-search="true" data-size="7">
        <option value="1">1</option>
        <option value="1">2</option>
        <option value="0">3</option>
        <option value="0">4</option>
        <option value="0">5</option>
        <option value="0">6</option>
      </select>
      <span class="input-group-addon">
        <abbr title = "?">
          <i class="glyphicon glyphicon-info-sign"></i>
        </abbr>
      </span>
    </div>
  </div>
</div>

JQuery:

<script>
var edit_table_hanlder =  $("#grid-editTable"); 

function init_edit_table(){
  var edit_table = edit_table_hanlder.bootgrid({
    ajax: true,
    post: function (){
      /* To accumulate custom parameter with the request object */
      return {
        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
      };
    },
    url: function (){
      var filterStatus = $("#filterStatus").val();
      return "get_ajax/filter_table.php?status=" + filterStatus;
    },
    selection: true,
    rowSelect: true,
    rowCount: [10, 25, 50, -1],
    pagination: 'pagination pagination-sccess',
    formatters: {
      "commands": function(column, row){
        return  "<div class=\"nowrap\">" + "<button type=\"button\" id=\"printpdf\" class=\"btn btn-xs btn-default print-pdf\" +  data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-file-pdf-o \"></span></button> " + "<button type=\"button\" id=\"see\"     class=\"btn btn-xs btn-success command-see\" +  data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-eye \"></span></button> " + "<button type=\"button\" id=\"edit\" class=\"btn btn-xs btn-primary command-edit\"   +  data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-pencil \"></span></button> " + "</div>";
      }
    }
  });
}

function reload_edit_table(){
  var filterStatus = $("#filterStatus").val();
  edit_table_hanlder.bootgrid("reload");
}

$('.filterTable').on('change', reload_edit_table);
</script>

Filter_table:

$status  = htmlspecialchars_decode($_GET['status']);

$sql =  "SELECT     *
        FROM   tabledata
        WHERE  tabledata.id > 0 ";

if($_GET['status'] != ""){
  $sql .= " AND tabledata.status  IN ($status)";
}

$table_result  = mysqli_query($link, $sql);
$i = 1;

while ($row = mysqli_fetch_array($table_result, MYSQL_ASSOC)) {
  $data[] = array(
     "id"            =>  $row["id"],
     "Pos"           =>  $i,
     "commands"      =>  "",
     "nr"            =>  $row["nr"], 
     "data2"         =>  $row["data2"],        
     "data3"         =>  $row["data3"], 
  );   
  $i++;
}

$output = array(
  'current'   => intval(1),
  'rowCount'  => [10, 25, 50, -1],
  'total'     => intval($i)-1,
  'rows'      => $data,
  'selection' => true,
  'rowSelect' => true
);

echo json_encode($output); 

Итак, как должен выглядеть мой ответ Ajax? А как перезагрузить загрузочную сетку для этой таблицы после каждого выбора новой опции?

0 ответов

Другие вопросы по тегам