Как создать раскрывающийся список в столбце данных?

Я хочу, чтобы в столбце моей таблицы данных был раскрывающийся список. Я заполняю свой datatable данными json, для которых у меня есть объекты json и массив, содержащий все эти объекты json.

html:

<table id = "orderDescriptionTable" class = "table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> Status </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>

javascript / jquery:

var obj1 = {
    srNo : "12",
    item: "Notebook",
    status: '<select id = "status-1" class = "status"></select>'
};
var obj2 = {
    srNo : "15",
    item: "Notebook",
    status: '<select id = "status-2" class = "status"></select>'
};
var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});

Я хочу, чтобы в моем столбце «Статус» таблицы был выпадающий список. Я попытался добавить теги внутри $ ('. Status'), но это, похоже, не помогло. Кто-нибудь может мне помочь?

jquery html datatables frontend

09.01.2019 14:25

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

626

Ответы 2

Вот простая таблица данных с одним столбцом (заполненным некоторыми ненужными данными), который показывает список выбора, отображаемый в столбце:

разметка html:

<body>
    <table class = "display" id = "exampleTable" width = "60%">
        <thead>
            <tr>
                <th>Select List Col</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

Таблица данных:

jQuery(function($) {

var testData = [
    ["test1", "test", "1"],
    ["test2", "test", "2"],
    ["test3", "test", "3"],
    ["test4", "test", "4"]
  ]

$('#exampleTable').DataTable({
      retrieve: true,
      paging: false,
      data : testData,
      columns: [ {
        "title": "Select List Col",
        "render": function(data, type, row, meta) {
          var a = testData.indexOf(row);
       var select = $("<select id='role_"+a+"'><option value ='1'>Option 1</option><option value ='2'>Option 2</option</select>");

       $("#role_"+a).val(row[1]);

       return select.prop("outerHTML")
        }
      } ],
      order: []
    });

});

09.01.2019 14:40

Надеюсь, это то, что вам нужно?

jsfiddle

<table id = "orderDescriptionTable" class = "table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> 
            <span style = "margin-left:25px;">Status</span> 
            <select id = "status-1" class = "status">
                <option value = "1" class = "status">1</option>
                <option value = "2" class = "status">2</option>
            </select> 
        </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>
<script>

var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});
$('#status-1').click(function(e){
    e.stopPropagation();
});

</script>

09.01.2019 14:41

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

Форма PHP с загрузкой файла и отправкой на почту

Получение элементов с условным рендерингом в зависимости от их типа

Выравнивание двух div бок о бок и по горизонтали одинаковое

Как сделать div, который не меняет размер

Ошибка проверки токена CSRF на Samsung S7

В элементах навигации не работают наведение и мегаменю

Обмен валюты в Spring Boot

Как назначить несколько «событий onclick» (для кнопок HTML) на 1 функцию, не вызывая всех статусов

Раскрывающееся меню слайдов

Невозможно определить HTML-содержимое HTML-тега с помощью innerHtml

Как создать раскрывающийся список в столбце данных?

Ответы 2

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

Похожие вопросы