logo标签列表

如何将选择下拉菜单添加到HTML DataTable中？

javascriptphphtmljquerydatatables
3

我主要使用 HTML、CSS、PHP 和 MYSQL 创建了一个网站，并添加了一个选择下拉菜单，供用户选择角色。我需要在表格中每一行的用户角色列中都显示该下拉菜单。我已经成功地让 Tabledit 在网站上工作，但我不确定如何将这个下拉菜单附加到“Roles”列。

以下是 HTML 的设置方式：

<body>
    <div class="panel panel-default">
        <!--        <div class="panel-heading">Sample Data</div>-->
        <div class="panel-body">
            <div class="table-responsive">
                <table id="sample_data" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Approval</th>
                        <th>Roles</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<!--SELECT DROPDOWN LIST-->
<select id="test">
    <?php
    for ($a = 1; $a <= $count ; $a++){
        ?>

        <option value="1"><?php echo($roles[($a-1)]);?></option>

        <?php
    }
    ?>
</select>
<!--//////////////-->
</body>

<script>
    $(document).ready(function(){

        var dataTable = $('#sample_data').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"FetchUserTable.php",
                type:"POST"
            }
        });

        $('#sample_data').on('draw.dt', function(){
            $('#sample_data').Tabledit({
                url:'ActionUserTable.php',
                dataType:'json',
                columns:{
                    identifier : [0, 'user_id'],
                    editable:[
                        [1, 'first_name'],
                        [2, 'last_name'],
                        [3, 'email'],
                        [4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
                        // [5, 'role_id']
                    ]
                },
                restoreButton:false,
                onSuccess:function(data, textStatus, jqXHR)
                {
                    if(data.action == 'delete')
                    {
                        $('#' + data.id).remove();
                        $('#sample_data').DataTable().ajax.reload();
                    }
                }
            });
        });

    });
1
"HTML jquery表格"是什么？您是指 https://datatables.net/ 吗？ - freedomn-m
是的，没错。谢谢 @freedomn-m - user14261375
4个回答
1
你可以使用列定义上的渲染选项来渲染任何你想要的内容。在渲染函数中，你可以访问行和整个数据对象。 

$(function() {
  let $tbl = $('#sample_data'), $select = $('#select-box')

  let data = [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$3,120"
    ],
    [
      "Garrett Winters",
      "Director",
      "Edinburgh",
      "8422",
      "2011/07/25",
      "$5,300"
    ]
  ]

  $tbl.DataTable({
    data: data,

    columns: [
      null, null, null, null, {

        render: function(data, type, row, meta) {
          return $select.html() + `Use this to select "${data}"`
        }
      },
      {
        render: function(data, type, row, meta) {
          return $select.html() + `Use this to select "${data}"`
        }
      },
    ]
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>


<body>
  <div class="panel panel-default">
    <!--        <div class="panel-heading">Sample Data</div>-->
    <div class="panel-body">
      <div class="table-responsive">
        <table id="sample_data" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Approval</th>
              <th>Roles</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div style="display:none;" id="select-box">
    <select>
      <option>Role 1</option>
    </select>
  </div>
</body>

0

我不确定您是在使用 DataTable 还是 Tabledit，您似乎由于某种原因将它们混合使用。我不确定从一开始就这样做是否明智。我建议选择其中一个。本答案重点介绍 Tabledit。

由于该表格基本上是通过 Tabledit 创建和管理的，因此您应该在那里提供数据。 您已经使用选择框进行了管理员批准：

[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']

您可以按照类似的方式创建角色选择器。鉴于$roles的结构不是共享的，我假设它是一个具有字符串值的数组。首先在<script>标记中创建一个变量 roles。

const roles = <?php echo json_encode($roles); ?>;

然后将该列添加到columns.editable设置中：

[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}'],
[5, 'role', JSON.stringify(roles)]
您可能需要转换$roles的结构以创建正确的JSON输出。以下是一些示例结果：

示例＃1

// assumed <?php echo json_encode($roles); ?> output
const roles = ["role A", "role B"];

创建：

<option value="0">role A</option>
<option value="1">role B</option>

示例 #2

// assumed <?php echo json_encode($roles); ?> output
const roles = {"role_a": "role A", "role_b": "role B"};

创建：

<option value="role_a">role A</option>
<option value="role_b">role B</option>
0

看看如何在datatables.net中添加一行...

   var t = $('#example').DataTable();

       t.row.add( [
           counter +'.1',
           counter +'.2',
           counter +'.3',
           counter +'.4',
           counter +'.5'
       ] ).draw( false );

所以，在你的情况下，在 onSuccess:function(data, textStatus, jqXHR) 中，我们只需要将这个代码 $('#sample_data').DataTable().ajax.reload(); 更改为...

var t = $('#sample_data').DataTable();
t.row.add([
    $('#test').html()
]).draw(false);
t.ajax.reload();

这基本上就是在做你以前的代码所做的事情，但现在你还要在 DataTable() 上调用 .row.add() 方法。
非常感谢您迄今为止的帮助，但我使用HTML DataTable的原因是它包含了每页限制和搜索框等额外功能。很遗憾，当使用HTML DataTable时，您的答案无法应用。 - user14261375
@JoseLuisLandivar 啊，我现在明白了！你认为这样会行吗？（如果是的话，我会更新我的答案。）在 $('#sample_data').DataTable().ajax.reload(); 之后，尝试：$('#sample_data').find('tbody').html('<tr><td>' + $('#test').html() + '</td></tr>');？这应该会在 datatables 成功处理程序之后重新附加它，或者让我知道我错了？那似乎应该可以工作？ - HoldOffHunger
哦，我的意思是，你需要的唯一更改应该是.row.add代码。你可以删除其他不起作用的更改。只有.row.add，这样行吗？ - HoldOffHunger
到目前为止它仍然不起作用。我一直收到相同的错误。也许你可以再次更新你的答案，我可以尝试一下。 - user14261375
感谢您的耐心等待，现在已经更新！第三次一定会成功。 - HoldOffHunger
显示剩余5条评论
0

这不是一个完美的解决方案，但它可以解决您的问题。首先选择您的角色HTML。

var emelnt = $('#test');
//now append to table td
$('table tbody td:nth-child(6)').html(emelnt);
//you can also use a function to first get role id from table each row then create your select here in js and the append it to html so then your roles drop down will be selected.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接