这个datatable 的ajax 怎么写,麻烦大佬给填充一下

这里边的ajax请求不会写,麻烦大佬给填充一下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>二十九师信息</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

  <style>
    .content {
      margin: 50px auto;
      border: 1px solid #ccc;
    }
    .operation {
      margin: 10px;
    }
    .operation>button {
      margin: 10px;
    }
    #books_length {
      float: left;
      margin-left: 20px;
    }
    #books_filter {
      float: right;
      margin-right: 20px;
    }
    #books {
      margin: 5px;
      text-align: center;
    }
    .center-block {
      display: block;
      width: 21%;
      margin: auto;
    }

  </style>
</head>

<body>
  <section class="content">
    <div class="btn-group operation">
      <button id="btn_add" type="button" class="btn bg-primary">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
      </button>
      <button id="btn_edit" type="button" class="btn bg-info">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
      </button>
      <button id="btn_delete" type="button" class="btn btn-success">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
      </button>
      <button type="button" class="btn btn-primary" >导出Excel</button>
    </div>
    <!-- 添加模块 -->
    <div class="modal fade" id="addBook" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">添加信息</h4>
          </div>
          <div id="addBookModal" class="modal-body">
            <div class="form-horizontal">
              <div class="form-group">
                <label for="bookName" class="col-sm-2 control-label">姓名:</label>
                <div class="col-sm-10">
                  <input class="form-control" id="bookName" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="bookAuthor" class="col-sm-2 control-label">性别:</label>
                <div class="col-sm-10">
                  <input class="form-control" id="bookAuthor" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="bookPrice" class="col-sm-2 control-label">家庭住址:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="bookPrice" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="bookPublish" class="col-sm-2 control-label">联系电话:</label>
                <div class="col-sm-10">
                  <input class="form-control" id="bookPublish" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="bookISBN" class="col-sm-2 control-label">备注:</label>
                <div class="col-sm-10">
                  <input class="form-control" id="bookISBN" type="text">
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="center-block">
              <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改模块 -->
    <div class="modal fade" id="editBookInfo" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">修改信息</h4>
            </div>
            <div id="editBookModal" class="modal-body">
              <div class="form-horizontal">
                <div class="form-group">
                  <label for="editBookName" class="col-sm-2 control-label">姓名:</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="editBookName" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editBookAuthor" class="col-sm-2 control-label">性别:</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="editBookAuthor" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editBookPrice" class="col-sm-2 control-label">家庭住址:</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="editBookPrice" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editBookPublish" class="col-sm-2 control-label">联系电话:</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="editBookPublish" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label for="editBookISBN" class="col-sm-2 control-label">备注:</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="editBookISBN" type="text">
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="center-block">
                <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
     <!-- 删除模块 -->
    <div class="modal fade" id="deleteBook" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">确认要删除吗?</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面view层 -->
    <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%">
      <thead>
        <tr>

          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>家庭住址</th>
          <th>联系电话</th>
          <th>备注</th>         
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</body>
<script>
  var data = [['', '李云龙', '男', '三八六旅', '133435435', '厉害']]
  var titles = ['','姓名', '性别', '家庭住址', '联系电话', '备注']
  $(function () {
    var table = $('#books').DataTable({
      data: data,
      "pagingType": "full_numbers",
      "bSort": true,
      "language": {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      },
       "buttons": [{
                       'extend': 'excel',  
                       'text': '导出为Excel统计表',//定义导出excel按钮的文字  
                       'className': 'btn btn-primary', //按钮的class样式
                       'exportOptions': { 
                           'modifier': {  
                               'page': 'all'  
                           }
                       }  
      }],     
      "columnDefs": [{
        "searchable": true,             
        "orderable": false,
        "targets": 0
      }],
      "order": [[0, 'asc']],

    });
    table.on('order.dt search.dt', function() {
      table.column(0, {
        search: 'applied',
        order: 'applied'
      }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
      });
    }).draw();
    $('#books tbody').on('click', 'tr', function () {
      if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
      }
      else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
    });
    $("#cancelAdd").on('click', function() {
      console.log('cancelAdd');
      $("#addBookModal").find('input').val('')
    })
    $("#addBooksInfo").on('click', function() {
      console.log('addBooksInfo'); 
      if (data.length) {
        if ($("#addBookModal").find('input').val() !== '') {
          var bookbutton = $("#bookbutton").val()   
          var bookName = $("#bookName").val()
          var bookAuthor = $("#bookAuthor").val()
          var bookPrice = $("#bookPrice").val()
          var bookPublish = $("#bookPublish").val()
          var bookISBN = $("#bookISBN").val()
          var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN);
          for (var i = 0; i < addBookInfos.length; i++) {
            if (addBookInfos[i] === '') {
              alert(titles[i] + '内容不能为空')
            }
          }
          table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw();
          $("#addBookModal").find('input').val('')
        }
      } else {
        alert('请输入内容')
      }
    })
    $("#addBooksInfo").click();    
    $("#btn_add").click(function(){
      console.log('add');
      $("#addBook").modal()
    });
    $('#btn_edit').click(function () {
      console.log('edit');
      if (table.rows('.selected').data().length) {
        $("#editBookInfo").modal()
        var rowData = table.rows('.selected').data()[0];
        var inputs = $("#editBookModal").find('input')
        for (var i = 0; i < inputs.length; i++) {
          $(inputs[i]).val(rowData[i + 1])
        }
      } else {
        alert('请选择项目');
      }
    });
    $("#saveEdit").click(function() {
      var editBookName = $("#editBookName").val()
      var editBookAuthor = $("#editBookAuthor").val()
      var editBookPrice = $("#editBookPrice").val()
      var editBookPublish = $("#editBookPublish").val()
      var editBookISBN = $("#editBookISBN").val()
      var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN);
      var tds = Array.prototype.slice.call($('.selected td'))
      for (var i = 0; i < newRowData.length; i++) {
        if (newRowData[i] !== '') {
          tds[i + 1].innerHTML = newRowData[i];
        } else {
          alert(titles[i] + '内容不能为空')
        }
      }    
    })
    $("#cancelEdit").click(function() {
      console.log('cancelAdd');
      $("#editBookModal").find('input').val('')
    })
    $('#btn_delete').click(function () {
      if (table.rows('.selected').data().length) {
        $("#deleteBook").modal()
      } else {
        alert('请选择项目');
      }
    });
    $('#delete').click(function () {
      table.row('.selected').remove().draw(false);
    });
  })
</script>

</html>

1个回答

$("#table1").DataTable({
// 也可以用对象来配置,更加灵活
"ajax": {
// url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action
url: "data.json",
type: 'POST',
// 传给服务器的数据,可以添加我们自己的查询参数
data: function (param) {
param.opportunityNO = $('#txtSearch').val();
return param;
},
//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
dataSrc: function (myJson) {
if (myJson.timeout) {
return "";
}
return myJson;
}
}
})

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问