Fatal编程技术网
  • datatables/
  • Datatables Jquery dataTable插件，我可以组合初始化（删除chekbox行并导出到csv）吗？

Datatables Jquery dataTable插件，我可以组合初始化（删除chekbox行并导出到csv）吗？

datatables

Datatables Jquery dataTable插件，我可以组合初始化（删除chekbox行并导出到csv）吗？,datatables,asp.net-ajax,Datatables,Asp.net Ajax,我已经成功地实现了插件，现在我需要的功能。没有混合实现的示例，即使用选中的复选框删除所有内容，使用csv/print。只是单功能实现的示例。这是可以的，但我认为会有一个或两个应用程序需要2到3个插件扩展才能成为一个完整的应用程序 我的代码，mvc 4 razor视图： @{ ViewBag.Title = "Price Comparison"; } <html> <head> <meta name="viewport" content="width

我已经成功地实现了插件，现在我需要的功能。没有混合实现的示例，即使用选中的复选框删除所有内容，使用csv/print。只是单功能实现的示例。这是可以的，但我认为会有一个或两个应用程序需要2到3个插件扩展才能成为一个完整的应用程序

我的代码，mvc 4 razor视图：

@{
    ViewBag.Title = "Price Comparison";
}

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title> Learning JQuery</title>
    <!---CSS-->
    <link href="~/Content/Site.css" rel="stylesheet" />
    <!---JQuery-->
    <link href="~/Content/DataTables/css/dataTables.tableTools.css" rel="stylesheet" />

    <link href="~/Content/DataTables/css/dataTables.tableTools.min.css" rel="stylesheet" />
    <script src="~/Scripts/DataTables/dataTables.tableTools.js"></script>
    <script src="~/Scripts/DataTables/dataTables.tableTools.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $.ajax({
                url: 'PricingService.asmx/GetPricing',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    var table = $('#example').dataTable({
                        select: true,
                        data: data,
                        columns: [
                            { 'data': 'Manufacturer' },
                            { 'data': 'Product' },
                            { 'data': 'SKU' },
                            {
                                'data': 'BarcodePrice',
                                'render': function (barcodeprice) {
                                    return "$" + barcodeprice;
                                }
                            },
                            {
                                'data': 'ScansourcePrice',
                                'render': function (scansourceprice) {
                                    return "$" + scansourceprice;
                                }
                            },
                            {
                                'data': 'BluestarPrice',
                                'render': function (bluestarprice) {
                                    return "$" + bluestarprice;
                                }
                            },

                        ]

                    });


                    var tableTools = new $.fn.dataTable.TableTools(table, {
                        'sSwfPath': '//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls.swf',
                        'aButtons': [{
                            'sExtends': 'copy',
                            'bShowAll': false
                        },
                        {
                            'sExtends': 'print',
                            'bShowAll': false
                        },
                        {
                            'sExtends': 'csv',
                            'bShowAll': false
                        },
                        {
                            'sExtends': 'xls',
                            'bShowAll': false
                        },
                        ]
                    });
                    $(tableTools.fnContainer()).insertBefore('#example_wrapper')
                }

            });


    });

    </script>

</head>
<body>
    <form id="frm-example" action="/nosuchpage" method="POST">
        <div style="border:1px solid black; padding:3px; width:1200px">
            <table id="example">
                <thead>
                    <tr>
                        <th>Manufacturer</th>
                        <th>Product</th>
                        <th>SKU</th>
                        <th>Our Price</th>
                        <th>Scansource Price</th>
                        <th>Bluestar Price</th>                        
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Manufacturer</th>
                        <th>Product</th>
                        <th>SKU</th>
                        <th>Our Price</th>
                        <th>Scansource Price</th>
                        <th>Bluestar Price</th> 
                    </tr>
                </tfoot>
            </table>
            <hr>

            <p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p>

            <p><button>Submit</button></p>

            <b>Data submitted to the server:</b><br>
<pre id="example-console">
</pre>
        </div>
    </form>
</body>
</html>

@{
ViewBag.Title=“价格比较”；
}
学习JQuery
$（文档）.ready（函数（）{
$.ajax({
url:'PricingService.asmx/GetPricing'，
方法：“post”，
数据类型：“json”，
成功：功能（数据）{
变量表=$（'#示例'）。数据表({
选择：true，
数据：数据，
栏目：[
{“数据”：“制造商”}，
{“数据”：“产品”}，
{'data'：'SKU'}，
{
“数据”：“条形码价格”，
“呈现”：函数（条形码价格）{
返回“$”+条形码价格；
}
},
{
“数据”：“ScansourcePrice”，
“呈现”：函数（scansourceprice）{
返回“$”+scansourceprice；
}
},
{
“数据”：“蓝星价格”，
“呈现”：函数（bluestarprice）{
返回“$”+价格；
}
},
]
});
var tableTools=new$.fn.dataTable.tableTools（表{
“sSwfPath”：“//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls.swf”，
“阿布顿”[{
“sExtends”：“copy”，
“bShowAll”：false
},
{
“六分之一”：“打印”，
“bShowAll”：false
},
{
“sExtends”：“csv”，
“bShowAll”：false
},
{
“六分法”：“xls”，
“bShowAll”：false
},
]
});
$（tableTools.fncainer（））.insertBefore（“#示例_包装器”）
}
});
});
制造商
产品
SKU
我们的价格
扫描源价格
蓝星价格
制造商
产品
SKU
我们的价格
扫描源价格
蓝星价格


按Submit并检查console中将要提交的URL编码表单数据

提交

提交到服务器的数据：
1.我不能多次初始化（“#示例”），那么在我看来，如何将以下内容组合到ajax代码中呢

 //
// Updates "Select all" control in a data table
//
function updateDataTableSelectAllCtrl(table){
   var $table             = table.table().node();
   var $chkbox_all        = $('tbody input[type="checkbox"]', $table);
   var $chkbox_checked    = $('tbody input[type="checkbox"]:checked', $table);
   var chkbox_select_all  = $('thead input[name="select_all"]', $table).get(0);

   // If none of the checkboxes are checked
   if($chkbox_checked.length === 0){
      chkbox_select_all.checked = false;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If all of the checkboxes are checked
   } else if ($chkbox_checked.length === $chkbox_all.length){
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If some of the checkboxes are checked
   } else {
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = true;
      }
   }
}

$(document).ready(function (){
   // Array holding selected row IDs
   var rows_selected = [];
   var table = $('#example').DataTable({
      'ajax': {
         'url': 'ids-arrays.txt' 
      },
      'columnDefs': [{
         'targets': 0,
         'searchable':false,
         'orderable':false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox">';
         }
      }],
      'order': [1, 'asc'],
      'rowCallback': function(row, data, dataIndex){
         // Get row ID
         var rowId = data[0];

         // If row ID is in the list of selected row IDs
         if($.inArray(rowId, rows_selected) !== -1){
            $(row).find('input[type="checkbox"]').prop('checked', true);
            $(row).addClass('selected');
         }
      }
   });

   // Handle click on checkbox
   $('#example tbody').on('click', 'input[type="checkbox"]', function(e){
      var $row = $(this).closest('tr');

      // Get row data
      var data = table.row($row).data();

      // Get row ID
      var rowId = data[0];

      // Determine whether row ID is in the list of selected row IDs 
      var index = $.inArray(rowId, rows_selected);

      // If checkbox is checked and row ID is not in list of selected row IDs
      if(this.checked && index === -1){
         rows_selected.push(rowId);

      // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
      } else if (!this.checked && index !== -1){
         rows_selected.splice(index, 1);
      }

      if(this.checked){
         $row.addClass('selected');
      } else {
         $row.removeClass('selected');
      }

      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle click on table cells with checkboxes
   $('#example').on('click', 'tbody td, thead th:first-child', function(e){
      $(this).parent().find('input[type="checkbox"]').trigger('click');
   });

   // Handle click on "Select all" control
   $('#example thead input[name="select_all"]').on('click', function(e){
      if(this.checked){
         $('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
      } else {
         $('#example tbody input[type="checkbox"]:checked').trigger('click');
      }

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle table draw event
   table.on('draw', function(){
      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);
   });

   // Handle form submission event 
   $('#frm-example').on('submit', function(e){
      var form = this;

      // Iterate over all selected checkboxes
      $.each(rows_selected, function(index, rowId){
         // Create a hidden element 
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
         );
      });

      // FOR DEMONSTRATION ONLY     

      // Output form data to a console     
      $('#example-console').text($(form).serialize());
      console.log("Form submission", $(form).serialize());

      // Remove added elements
      $('input[name="id\[\]"]', form).remove();

      // Prevent actual form submission
      e.preventDefault();
   });
});

//
//更新数据表中的“全选”控件
//
函数updateDataTableSelectAllCtrl（表）{
var$table=table.table（）.node（）；
var$chkbox_all=$（'t正文输入[type=“checkbox”]，$table）；
var$chkbox_checked=$（'tbody input[type=“checkbox”]：checked'，$table）；
var chkbox_select_all=$（'thead input[name=“select_all”]，$table）.get（0）；
//如果未选中任何复选框
如果（$chkbox_checked.length==0）{
chkbox\u select\u all.checked=false；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=false；
}
//如果选中了所有复选框
}else if（$chkbox\u checked.length===$chkbox\u all.length）{
chkbox\u select\u all.checked=true；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=false；
}
//如果选中了某些复选框
}否则{
chkbox\u select\u all.checked=true；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=true；
}
}
}
$（文档）.ready（函数（）{
//包含选定行ID的数组
所选变量行数=[]；
变量表=$（'#示例'）。数据表({
“ajax”：{
“url”：“ids arrays.txt”
},
“columnDefs”：[{
“目标”：0，
“可搜索”：false，
“orderable”：false，
'className'：'dt body center'，
“呈现”：函数（数据、类型、完整、元）{
返回“”；
}
}],
“订单”：[1，‘asc']，
“rowCallback”：函数（行、数据、数据索引）{
//获取行ID
var rowId=数据[0]；
//如果行ID在所选行ID列表中
if（$.inArray（rowId，选中的行）！=-1）{
$（行）.find（'input[type=“checkbox”]”）。prop（'checked'，true）；
$（行）.addClass（'selected'）；
}
}
});
//处理单击复选框
$（“#示例tbody”）。在（'click'，'input[type=“checkbox”]”上，函数（e）{