Question

我有一个要与jquery datatable插件一起使用的表，这里我的所有功能都工作正常，但是我需要从ajax调用和外部json获取表数据和列标题。目前，我已经使用了一个变量并获取数据。下面是单独的html，json和脚本文件代码。预先感谢。

HTML

for each flag from enum DIALOG_DPI_CHANGE_BEHAVIORS
{
    if flag is set in mask
    {
       set flag value from values
    }
}

Answer 1

要使用ajax加载.json文件，您必须需要服务器，否则您会收到此错误跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。控制台
或，如果您想在本地运行，请选中此answere。
加载.json文件的代码

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script>
   $.ajax({
       url: 'demo.json',
       dataType: 'json',
       success: function(data) {
           console.log(data);
       }
   });
</script>

您的.json文件应如下所示

[{
    "Latitude": 18.00,
    "Longitude": 23.00,
    "Name": "Pune"
}, {
    "Latitude": 14.00,
    "Longitude": 24.00,
    "Name": "Mumbai"
}, {
    "Latitude": 34.004654,
    "Longitude": -4.005465,
    "Name": "Delhi"
}, {
    "Latitude": 23.004564,
    "Longitude": 23.007897,
    "Name": "Jaipur"
}]

已编辑 我无权发表评论。多数民众赞成在这里。
您可以按如下方式使用它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<table id="example" class="display" cellspacing="0" width="100%"></table>
<script>
    $.ajax({
        url: 'demo.json',
        dataType: 'json',
        success: function(jsondata) {
            var my_columns = [];

            $.each(jsondata[0], function(key, value) {
                var my_item = {};
                my_item.data = key;
                my_item.title = key;
                my_columns.push(my_item);
            });
            var tables = $('#example').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "createdCell": function(td, cellData, rowData, row, col) {
                        if ((cellData > 3) && (cellData < 15)) {
                            $(td).css('color', 'green')
                        } else
                        if ((cellData > 16) && (cellData < 20)) {
                            $(td).css('color', 'orange')
                        } else
                        if ((cellData > 21) && (cellData < 35)) {
                            $(td).css('color', 'red')
                        }
                    }
                }],
                dom: 'l<"#add">frtip',
                "language": {
                    "paginate": {
                        "previous": "<&nbsp;Previous",
                        "next": "next&nbsp;>"
                    }
                },
                data: jsondata,
                "columns": my_columns
            })
            $('<label/>').text('Search Column:').appendTo('#add')
            $select = $('<select/>').appendTo('#add')

            $('<option/>').val('All').text('All').appendTo($select);
            $('<option/>').val('0').text('Long').appendTo($select);
            $('<option/>').val('1').text('Lat').appendTo($select);
            $('<option/>').val('2').text('Name').appendTo($select);

            $('input[type="search"]').on('keyup change recheck', function() {
                var searchValue = $(this).val();
                var columnSearch = $select.val();

                $('#example').DataTable().columns().every(function() {
                    //alert('hi');
                    this.search('');
                });

                if (columnSearch == 'All') {
                    tables.search(searchValue).draw();
                } else {
                    tables.columns(columnSearch).search(searchValue).draw();
                }
            });
            $select.on('change', function() {
                $('#example').DataTable().search('').draw();
                $('input[type="search"]').trigger('recheck');
            });
        }
    });
</script>

如何从外部JSON填充数据表和列标题

HTML

1 个答案: