JQ事件在datatable.js的提取行排序中没有活动

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ事件在datatable.js的提取行排序中没有活动相关的知识，希望对你有一定的参考价值。

我正在使用DataTable.js来显示数据，我在<select>中有一些<tr>选项，而DataTable显示了带有默认参数的10个frist行，并且我有一个带有JQ的更改事件。这是我的问题，JQ .change()事件只在10 frist行工作。如果我在用户视图中更改show选项（代码源中没有），它仍适用于10 frist行。

我试图在select元素上添加onchange="changeEvent" ..它没有显示在用户显示代码源中

$('select[name="type"]').change(function(){
    var type_req = $(this).val();

    var id = $(this).closest('tr').find('td#id_commande').html();
    var action ="update";
    var action_infos = "type_req";

    console.log("change event active");
    console.log(type_req);
    console.log(id);

    $.ajax({
        type: "POST",
        url: "../controllers/commandeController.private.php",
        data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
        success:function(){toastr.success("Modification commande réussi")},
        error:function(){toastr.error("Modification commande impossible")},
    });
});

我只是尝试在所有行上激活.change，即使它们在用户更改show up选项后显示

[function showReqTypeAsOption]

function showReqTypeAsOption($array=array()){

  $option="";
  if(!$array == null){

    if(empty($array['name'])){
      $array['name']="type_bis";

    }
    if(!empty($array['current_type'])){
      $select=1;
    }
  }

  $res=getReqType();

  foreach ($res as $ligne) {

    if($select){
      if($ligne['id'] == $array['current_type']){
        $selected= "selected";
        // $select=0;
      }else{
        $selected= "";
      }
    }

    $option = $option."<option value='".$ligne['id']."' $selected > ".$ligne['type_name']." </option>";
  };
  $option='<select name="'.$array['name'].'" id="Req_type" > '.$option.' </select>';


  return $option;
}


// DataTable
$(document).ready(function() {
  $('#MyTable').DataTable();
  $('#defaultTable2').DataTable();
  $('#defaultTable3').DataTable();
  $('#defaultTable4').DataTable();
});

$(function() {
$('#myTable').DataTable();

$("select[name='type']").change(function() {
  var type_req = $(this).val();
  var id = $(this).closest('tr').find('td.id_commande').html();
  console.log("change event active");
  console.log(type_req);
  console.log(id);
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>


    <title></title>
  </head>
  <body>


    <table id="MyTable" class="table table-bordered display" style="width:100%">
  <thead>
    <tr>
      <th>ID Col</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
<tr>
  <td class="id_commande">Row 1</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 2</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 3</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 4</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 5</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 6</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 7</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 8</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 9</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 10</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 11</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 12</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 13</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 14</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 15</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 16</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 17</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 18</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 19</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 20</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 21</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 22</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 23</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 24</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 25</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 26</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 27</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 28</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 29</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 30</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
  </tbody>
</table>
答案

这对我有用，希望它对你有用，所以试试这个

  $('#example tbody').on( 'change', 'select[name="your_select_name"]',function(){
                  var data = '';
                 data = example.row( $(this).parents('tr') ).data();
                  var clientid = data['your column name'];
                  var selectId = this.value;
                 console.log(clientId);
                 console.log(selectedId);

                //if id is okay do an ajax call inside a function something like this
                if(clientid != undefined){
                 ajaxCallBack(clientId,selectedId)
                             .done(function(response){
                                   //your update response here
                                    })
                    }
    })

ajax功能：

function ajaxCallBack(clientId,selectId){
  return   $.ajax({
    method: "POST",
    url: "YourUrl",
    data: { action: "UPD", clientId: clientId, selectId: selectId}
  })
}

编辑：

Your datatable should be declared like this:

  var example= $('#example').DataTable({
                "destroy": true,
                "responsive":{
                  "details": {
                  renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                      return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                          '<td>'+col.title+':'+'</td> '+
                          '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                    } ).join('');

                    return data ?$('<table/>').append( data ) :false;
                  }
                }
              },
                "autoWidth": false,
                      "ajax": {
                          "url": 'some.php',
                          "method": 'POST',
                          data:{accion:"SLC"}
                      },
                      "columns": [
                          {"data": "client"},
                          {"data": "name"},
                          {"data": "lastname"},
                          {"data": "device"},
                          {"data": "city"},
                          {
                       className: "center",
                       defaultContent:"<select id='idSelect' name ='idSelect'  ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
                     }
                      ],
                      "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                        "columnDefs": [
                          {
                            "className": "dt-center", "targets": "_all"
                           }
                        ]
                  }
                );

希望能帮助到你

另一答案

好吧我把事件固定在其他行上 但这些另一个问题是事件是重复的

[旧]

  $("select[name='type']").change(function(){
              var type_req = $(this).val();

              var id = $(this).closest('tr').find('td#id_commande').html();
              var action ="update";
              var action_infos = "type_req";

              console.log("change event active");
              console.log(type_req);
              console.log(id);

              $.ajax({
                type: "POST",
                url: "../controllers/commandeController.private.php",
                data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
                success:function(){toastr.success("Modification commande réussi")},
                error:function(){toastr.error("Modification commande impossible")},
              });

            });

[新]

$('table[name="commandeTable"]').on("click",function(){


            $("select[name='type']").change(function(){
              var type_req = $(this).val();

              var id = $(this).closest('tr').find('td#id_commande').html();
              var action ="update";
              var action_infos = "type_req";

              console.log("change event active");
              console.log(type_req);
              console.log(id);

              $.ajax({
                type: "POST",
                url: "../controllers/commandeController.private.php",
                data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
                success:function(){toastr.success("Modification commande réussi")},
                error:function(){toastr.error("Modification commande impossible")},
              });

            });
          });

以上是关于JQ事件在datatable.js的提取行排序中没有活动的主要内容，如果未能解决你的问题，请参考以下文章

Cassandra中的行排序

jQ追加的节点添加事件无效

jquery.dataTable.js 基础配置

使用 jq 或替代命令行工具比较 JSON 文件

jquery dataTables - 如何在点击事件中提取行数据

怎么用jq封装插件