时间戳

首页 > 解决方案 > 如何保存我的数据表数据 ASP.NET MVC 5

javascript - 如何保存我的数据表数据 ASP.NET MVC 5

问题描述

我需要保存我的所有数据datatable

我怎样才能添加一个通用按钮来保存我的数据表中的所有内容？

这在我目前的Project：

var table = $('#listaDocumentos').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf'
    ],
    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
        "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Documentos",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    }
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>

<table id="listaDocumentos" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

标签： javascriptasp.net-mvcasp.net-mvc-4asp.net-mvc-3datatable

解决方案

我从您的问题中了解到，您需要将当前显示在视图（Html 页面）中的数据保存为表格格式。

在这种情况下，您可以使用下面的 jquery 或 javascript 来获取数据。

var table = $("table tbody");

table.find('tr').each(function (i) {
// comment loop through the tr and get value of every td within this tr tag
var tds = $(this).find('td');
var  Name = $tds.eq(0).text();
var Position = $tds.eq(1).text();
var office = $tds.eq(2).text();
var age = $tds.eq(3).text();
var startPosition = $tds.eq(4).text();
var salary = $tds.eq(5).text();
});

然后在视图中绑定一个按钮

<input type="button" id="btn_data_save" value="Save Data"/>

然后调用 ajax 将数据传递给服务器。在该调用中，您需要收集所有值并构建一个对象数组。

$(document).on('click','#btn_data_save', function(){
    var ary=[];

    var table = $("table tbody");
    table.find('tr').each(function (i) {
    var obj={};
    obj.tds = $(this).find('td');
    obj.name = $tds.eq(0).text();
    obj.position = $tds.eq(1).text();
    obj.office = $tds.eq(2).text();
    obj.age = $tds.eq(3).text();
    obj.startPosition = $tds.eq(4).text();
    obj.salary = $tds.eq(5).text();
    ary.Push(obj);
 });

$.ajax({ 
     type: 'POST', 
     url: '', 
     data: { list: JSON.stringify(ary) }, 
     dataType: 'json',
     success: function (data) {      
   }
});
});

最后在控制器中

[HttpPost]
public ActionResult SaveData(string list)
{
    //comment do your work    
}

如果您不理解解决方案，请发表评论。如有必要，我会描述。

推荐阅读