美文网首页
Datatable表格单选+删除实现

Datatable表格单选+删除实现

作者: IT和金融 | 来源:发表于2018-04-17 23:50 被阅读0次

    如果html前端为:

    
    <table class="table table-striped table-bordered table-hover" id="dataTablesDevice">
    
            <thead></thead><tbody></tbody>
    
    </table>
    

    那么单选实现为:

    
    $('#dataTablesDevice tbody').on('click', 'tr', function() {
    
    if ($(this).hasClass('selected')) {
    
          $(this).removeClass('selected');
    
    } else {
    
          tableLight.$('tr.selected').removeClass('selected');
    
           //其中tableLight为var tableLight = $('#dataTablesDevice').DataTable的返 回值
    
          $(this).addClass('selected');
    
    }
    
    });
    

    删除实现方式为:

    
    del = function()
    
        {
    
        if(tableLight.row('.selected').data() == null)
    
            {
    
              alert("请至少选择一条数据");
    
              return;
    
            }
    
        $('#roleDelModal').modal("show"); //弹出删除的对话框,对话框id为:roleDelModal
    
        }
    

    如果删除需要ajax请求,则:

    
    del_info = function()
    
     {
    
           var tableLight = $('#dataTablesLight').DataTable();
    
           var s = tableLight.row('.selected').data().name;
    
           $.ajax({  //需要引入jquery
    
                url:"/system/delrole",
    
                data:{"name":s},
    
                type:"post",
    
                success:function(data){
    
                    alert("删除成功");
    
                    $('#roleDelModal').modal("hide");
    
                    tableLight.ajax.reload(); //删除后表格自动刷新
    
                  },
    
                error:function()
    
                  {
    
                   alert("fail");
    
                  }
    
              });
    
        }
    

    相关文章

      网友评论

          本文标题:Datatable表格单选+删除实现

          本文链接:https://www.haomeiwen.com/subject/xfemkftx.html