Question

我需要你帮助的人。纠正代码的错误。

我想将table1上的行表复制到table2，但是当我使用ajax json时数据不会显示。必须手动插入html。

JSFiddle
我想复制datatable上的行表，但是当我使用ajax json时，数据不显示。

代码段演示

// Code goes here
$(document).ready(function() {
    var stockTable = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/zvujb",
    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "searchable": false,
      "orderable": false,
      "className": 'dt-body-center',

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "select": {
      "style": "multi"
    },
    "order": [
      [4, "desc"]
    ],
    "scrollY": "400px",
    "scrollCollapse": true,

    }); // first table 
    
	var catalogTable = $('#table2').dataTable(); // Second table 
   
    stockTable.on('click', 'tbody tr' ,function() {
		 $(this).toggleClass('selected');
    });
	catalogTable.on('click', 'tbody tr' ,function() {
		 $(this).toggleClass('selected');
    });
	
	$('#LeftMove').on('click',function () {
		moveRows(catalogTable, stockTable);
	});
	
	$('#RightMove').on('click',function () {
		moveRows(stockTable, catalogTable);
	});
	
});
	
function moveRows(fromTable, toTable){
	var $row= fromTable.find(".selected");
	$.each($row, function(k, v){
		if(this !== null){
			addRow = fromTable.fnGetData(this);
			toTable.fnAddData(addRow);
			fromTable.fnDeleteRow(this);
		}
	});
}

/* Styles go here */

#table2_wrapper{
	margin-top:50px;
	margin-left:50px;
}
#table1_wrapper{
	
	margin-left:50px;
}
table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.display tbody tr.odd:hover.selected > .sorting_1, table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>


<body>
      
  <div class="one" style="padding-bottom:50px">
  <table id="table1" class="table table-bordered table-hover">
    <thead>
        <tr>
             <th></th>
             <th>Audience Name</th>
             <th>Type</th>
             <th>Size</th>
             <th>Date Created</th>
        </tr>	
    </thead>
</table>
</div>

<center>
<button id="RightMove" style="float:left;">right &raquo;</button>
<button id="LeftMove" style="float:left;">&laquo; left</button>
</center>

<br>
<br>

<div class="two">
<table id="table2" class="table table-bordered table-hover">
    <thead>
        <tr>
             <th></th>
             <th>Audience Name</th>
             <th>Type</th>
             <th>Size</th>
             <th>Date Created</th>
        </tr>
    </thead>
</table>
</div>
</body>

Answer 1

按如下方式编辑您的ajax电话

 ajax: {
         "url": "https://api.myjson.com/bins/zvujb",
         "type": "GET",
         "error": function (e) {
                },
         "dataSrc": function (d) {
                    return d
                }
        },

Answer 2

[已解决的问题] https://jsfiddle.net/4fukuma/o6ysgzps/2/

使用jquery-1.12.4.js

更改jquery文件

并修改table2 js code == table1

$(document).ready(function() {
    var stockTable = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/zvujb",
    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "searchable": false,
      "orderable": false,
      "className": 'dt-body-center',

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "select": {
      "style": "multi"
    },
    "order": [
      [4, "desc"]
    ],
    "scrollY": "400px",
    "scrollCollapse": true,

    }); // first table 

    var catalogTable = $('#table2').dataTable({

  "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "searchable": false,
      "orderable": false,
      "className": 'dt-body-center',

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "select": {
      "style": "multi"
    },
    "order": [
      [4, "desc"]
    ],
    "scrollY": "400px",
    "scrollCollapse": true,

    }); // Second table 

    stockTable.on('click', 'tbody tr' ,function() {
         $(this).toggleClass('selected');
    });
    catalogTable.on('click', 'tbody tr' ,function() {
         $(this).toggleClass('selected');
    });

    $('#LeftMove').on('click',function () {
        moveRows(catalogTable, stockTable);
    });

    $('#RightMove').on('click',function () {
        moveRows(stockTable, catalogTable);
    });

});

function moveRows(fromTable, toTable){
    var $row= fromTable.find(".selected");
    $.each($row, function(k, v){
        if(this !== null){
            addRow = fromTable.fnGetData(this);
            toTable.fnAddData(addRow);
            fromTable.fnDeleteRow(this);
        }
    });
}

dataTable不显示ajax数据

2 个答案: